CODEWITHSUNDEEP
javascriptdom-events
Kody R.
Kody R.

Reputation: 2460

Add event listener to JavaScript object

I'm getting back an array of JavaScript objects from a database. I'm looping through that array and creating objects to be displayed on the screen. I'm trying to use .addEventListener() to each object but I just realized that addEventListener() only works for DOM objects.

How could I add an event listener to each JavaScript object?

Here is my code:

    var objects = JSON.parse(data.responseText);
    var i;
    var objectLn = objects.length;

    for (i = 0; i < objectLn; i++) {

        //Puts each object into a variable
        var eachObject = objects[i];

        //Establishes pin position
        var pinPos = {
            lat: parseFloat(eachObject.lat),
            lng: parseFloat(eachObject.lng)
        };

        //Creates new icon for pin
        var icon = {
            url: "path/to/img",
            scaledSize: new google.maps.Size(60, 60),
            origin: null,
            anchor: null
        };

        //Creates a new pin from pulled information
        var pin = new google.maps.Marker({
            position: pinPos,
            map: map,
            icon: icon
        });

        //Alerts each object on click
        pin.addListener('click', function() {
            alert(JSON.stringify(eachObject));
            map.panTo(pinPos);
            map.setCenter(pinPos);
        });
    }

addListener is adding a 'click' listener to each pin that is dropped, so that's good. The problem is that it's supposed to alert each object, but it's only alerting the last object I retrieve from the database on every pin I click.

Upvotes: 0

Views: 345

Answers (1)

I wrestled a bear once.
I wrestled a bear once.

Reputation: 23379

try doing your loopage like so..

for (i = 0; i < objectLn; i++) {
    (function(eachObject){
        // copy the loop contents here. eachObject is already defined.
    })(objects[i]);
}

Upvotes: 1

Related Questions