Is there a way to invoke a method on an object stored in an array index?

Question

Is there a way to invoke a method on an object stored in an array index?

Attempting to generate infowindows for markers within a Google Map, I utilized an array to create "disposable objects" within a for loop. Unfortunately, my approach is not yielding the desired results. Clicking on the markers has no effect, and upon checking the console, I encounter the following error message:

Uncaught TypeError: Cannot call method 'open' of undefined

Not assigning the object to an array index causes each marker click to only open the last info window (as the object being overwritten updates all references to previous objects).

How can I resolve this issue?

markers = []
infowindows = []
counter = 0
for location in exports.response.locations
    myLatlng = new google.maps.LatLng(location.latitude, location.longitude);
    markers[counter] = new google.maps.Marker(
        position: myLatlng
        map: map
        title: location.name
    )
    contentString = '<div id="info_content_' + location.id + '">' + '<h3>' + location.name + '</h3>' + '<ul>' + '<li>' + location.address + ', ' + location.city + '</li>' + '</ul>'
    infowindows[counter] = new google.maps.InfoWindow(content: contentString)

    google.maps.event.addListener markers[counter], "click", ->
        infowindows[counter].open(map, markers[counter])

    counter++

Note

The issue lies in the 3rd to last line of the code above (

infowindows[counter].open(map, markers[counter])

)

Answer

While every response to this question contributed to finding a solution, I ultimately resolved it using a forEach loop:

markers = []
infowindows = []
exports.response.locations.forEach (location) ->
    myLatlng = new google.maps.LatLng(location.latitude, location.longitude);
    markers[location.id] = new google.maps.Marker(
        position: myLatlng
        map: map
        title: location.name
    )
    contentString = '<div id="info_content_' + location.id + '">' + '<h3>' + location.name + '</h3>' + '<ul>' + '<li>' + location.address + ', ' + location.city + '</li>' + '</ul>'
    infowindows[location.id] = new google.maps.InfoWindow(content: contentString)

    google.maps.event.addListener markers[location.id], "click", ->
        infowindows[location.id].open(map, markers[location.id])

javascript coffeescript

Answer 1

Answer №1

It seems like the issue you're encountering is with the counter variable losing its valid index:

for location in exports.response.locations

    google.maps.event.addListener markers[counter], "click", ->
        infowindows[counter].open(map, markers[counter])

    counter++

The problem lies in the fact that counter is being captured in the onClick handler closure.

This means that the value of counter will increment beyond its bounds before the onClick handler is executed.

As a result, all of the handlers will use the same value for counter.

Answer 2

It seems like the issue you're encountering is with the counter variable losing its valid index:

for location in exports.response.locations

    google.maps.event.addListener markers[counter], "click", ->
        infowindows[counter].open(map, markers[counter])

    counter++

The problem lies in the fact that counter is being captured in the onClick handler closure.

This means that the value of counter will increment beyond its bounds before the onClick handler is executed.

As a result, all of the handlers will use the same value for counter.

Answer 3

Answer №2

When using addListener, keep in mind that it triggers code asynchronously. This means that the value of the counter may not be the same when the callback function is executed as it was when the function was initially declared. To ensure that the variables retain their original values, it's important to enclose them in a closure. The code snippet below demonstrates a reliable method for achieving this. While declaring currentCounter within the loop should suffice, explicitly using a closure can provide additional clarity.

markers = []
infowindows = []
counter = 0

for location in exports.response.locations
    myLatlng = new google.maps.LatLng(location.latitude, location.longitude);
    markers[counter] = new google.maps.Marker(
        position: myLatlng
        map: map
        title: location.name
    )
    
    contentString = '<div id="info_content_' + location.id + '">' + '<h3>' + location.name + '</h3>' + '<ul>' + '<li>' + location.address + ', ' + location.city + '</li>' + '</ul>'

    infowindows[counter] = new google.maps.InfoWindow(content: contentString)
    
    google.maps.event.addListener markers[counter], "click", (function(infowindows, markers, currentCounter) { 
        return function() {  infowindows[currentCounter].open(map, markers[currentCounter]) }
    })(infowindows, markers, counter)
    
    counter++

For more examples and insights on using closures within loops, refer to JavaScript closure inside loops – simple practical example

Answer 4

When using addListener, keep in mind that it triggers code asynchronously. This means that the value of the counter may not be the same when the callback function is executed as it was when the function was initially declared. To ensure that the variables retain their original values, it's important to enclose them in a closure. The code snippet below demonstrates a reliable method for achieving this. While declaring currentCounter within the loop should suffice, explicitly using a closure can provide additional clarity.

markers = []
infowindows = []
counter = 0

for location in exports.response.locations
    myLatlng = new google.maps.LatLng(location.latitude, location.longitude);
    markers[counter] = new google.maps.Marker(
        position: myLatlng
        map: map
        title: location.name
    )
    
    contentString = '<div id="info_content_' + location.id + '">' + '<h3>' + location.name + '</h3>' + '<ul>' + '<li>' + location.address + ', ' + location.city + '</li>' + '</ul>'

    infowindows[counter] = new google.maps.InfoWindow(content: contentString)
    
    google.maps.event.addListener markers[counter], "click", (function(infowindows, markers, currentCounter) { 
        return function() {  infowindows[currentCounter].open(map, markers[currentCounter]) }
    })(infowindows, markers, counter)
    
    counter++

For more examples and insights on using closures within loops, refer to JavaScript closure inside loops – simple practical example

Is there a way to invoke a method on an object stored in an array index?

Answer №1

Answer №2

Similar questions

Is there a way to trigger the activation of the datepicker during the `onLoad` event?

Sending data using Ajax to the server-side code in ASP.NET

Sharing golang gin session with next.js

AngularJS interprets expressions in the 'action' attribute

Validating a request model against the schema defined in an OpenAPI 3 (Swagger) specification in NodeJS: A comprehensive guide

Node.js and Azure blob storage compliment each other perfectly

"Learn how to update an existing table row and populate its cells with JSON data retrieved from a successful AJAX request without creating a

Save the value of a webpage element into a variable and utilize it across multiple JavaScript files in TestCafe

Looking for assistance with navigating through this URL using Python (requests, beautifulsoup, or selenium) or Javascript (node js, puppeteer)?

Is it time to advance to the next input field when reaching the maxLength?

How can I link two separate webpages upon submitting a form with a single click?

Step-by-step guide on dynamically adding "Input Tags" to the DOM at runtime using Selenium's JavascriptExecutor

How to use jQuery to highlight the parent element when clicking on a child element?

The canvas game's animation can only be activated one time

basic computation of whole and decimal values using jquery

I was disappointed by the lackluster performance of the DataTable in CodeIgniter; it did not

How can you choose multiple options in a Select2 dropdown when it first loads?

Problem with jQuery's .prepend method being called twice on list items

Extracting Querystring Value in C#

Stop jQuery popups from wrapping text when resizing the browser window