Javascript: Generating object keys inside a loop and pushing an array of objects into each?

Question

I am working on a Google Map here: http://crocdoc.ifas.ufl.edu/projects/chameleonmapdev/

I have the data for the markers set up in this format:

var nights = ['July1211', 'July1411'];
var waypoint_data = {
    July1211: [
        //Lat, long, j/a (juvenile/adult)
        [25.429363, -80.508326, j],
        [25.429332, -80.508216, j]
    ],

    July1411: [
        [25.42936, -80.51023, j], 
        [25.42936, -80.51036, j]

    ]
};

And the function that builds the points looks like this:

function buildPoints() {
    //var marker_container = new Object;

        for ( i = 0; i < nights.length ; i++ ) {

            //Loop for each data point that night
            for ( h = 0; h < waypoint_data[nights[i]].length; h++) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(waypoint_data[nights[i]][h][0], waypoint_data[nights[i]][h][1]),
                    icon: waypoint_data[nights[i]][h][2],
                    shape: pointshape,
                    map: map
                });

                //Push waypoints into date-specific object key
                //marker_container[nights[i]].push(marker);

            }

        }

    }

I would like to push the markers for each date (night[i]) into a different object key so that I can hide/show a specific night's markers. I've tried doing this with the two marker_container lines I've commented out, but they just break my loop, and in Firebug, I get an error about marker_container[nights[i]] being undefined. nights[i] is a string, so I thought this syntax would work. Any hints are greatly appreciated, and I'm very open to suggestions for other, better ways to code this.

Brian Glaz · Accepted Answer · 2011-09-15 16:46:29Z

2

You can't use push on an Object, only on array. I think this is what you want to do:

function buildPoints() {
    var marker_container = new Object();

        for ( i = 0; i < nights.length ; i++ ) {
            marker_container[nights[i]] = new Array();

            //Loop for each data point that night
            for ( h = 0; h < waypoint_data[nights[i]].length; h++) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(waypoint_data[nights[i]][h][0], waypoint_data[nights[i]][h][1]),
                    icon: waypoint_data[nights[i]][h][2],
                    shape: pointshape,
                    map: map
                });

                //Push waypoints into date-specific object key
                marker_container[nights[i]].push(marker);

            }

        }

    }

simple proof of concept jsfiddle

edited Sep 15, 2011 at 16:46

answered Sep 15, 2011 at 16:36

Brian Glaz

15.7k4 gold badges40 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dtanders Over a year ago

marker_container shouldn't be an array since he's using strings as keys (nights[i])

petroica Over a year ago

Ah yes, this is exactly what I was trying to achieve! Thank you.

Casey · Accepted Answer · 2011-09-15 16:46:04Z

0

If you know how many markers you'll have (let's say 10), set-up the marker container, making each element of the object an object itself, of length 2:

    marker_container= new Object(10);
       for (i=0; i<marker_container.length; i++){
          marker_container[i]=new Object(2);
       }

After creating your markers, add them to the marker_container:

  marker_container[i][0] = nights[i];
  marker_container[i][1] = marker;

When you want to display and hide a marker, do this:

  //display
  marker_container['nightX'].setMap(map);

  //hide
  marker_container['nightX'].setMap(null);

answered Sep 15, 2011 at 16:46

Casey

2,0553 gold badges20 silver badges22 bronze badges

Collectives™ on Stack Overflow

Javascript: Generating object keys inside a loop and pushing an array of objects into each?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related