Javascript: Objects pushed into array overriding each other?

Question

I have an object that is formatted like this:

var telemetry_data = {

  T36: [
    //Date, lat, long
    [20120516, 25.40294163, -80.46972051],
    [20120518, 25.40306787, -80.46967025],
    [20120521, 25.40234592, -80.46980265]
  ],

  T43: [
    [20120523, -25.4076545, -80.46945134],
    [20120525, -25.40761155, -80.46756243]
  ]
};

This shows different animals' (T##) locations on different dates. I want to place a marker on Google Maps showing the location of the animal at a specific date, as well as a polyline showing the path it followed to get there. I'm having trouble with the polyline part. Please see below. Everything seems to work up until path[tegu_name[j]].push(tegu_location);, where path[tegu_name[j]] looks like it gets overriden by only the last location, instead of the location being added to the array. For some animals (T23, T34, T35, T36), the arrays remain completely empty, despite there being correctly dated locations. Any ideas? I have a feeling I made some silly mistake, but I can't figure it out.

Live: http://crocdoc.ifas.ufl.edu/projects/tegumap/ (Change the date to May 18th to run this part of the code through many locations and you can see the console printing objects with only one location [from line 776]. The current locations are the purple dots)

Full JS: http://crocdoc.ifas.ufl.edu/projects/tegumap/js/tegumap.js

//Telemetered tegus
var tegu_location;
var path = new Object();
var line = new Object();

//For each tegu
for (var j = 0; j < tegu_name.length; j++) {
    var tegu_key = telemetry_data[tegu_name[j]];
    //For each date
    for (var k = 0; k < tegu_key.length; k++) {
        path[tegu_name[j]] = new Array();
        if (tegu_key[k][0] <= date) {
            console.log("use point at date "+tegu_key[k][0]);
            tegu_location = new google.maps.LatLng(tegu_key[k][1], tegu_key[k][2]);
            path[tegu_name[j]].push(tegu_location);
        } else {
            marker = new google.maps.Marker({
              icon: point_tracked,
              shape: point_shape,
              map: map,
              position: tegu_location

            });
            marker_container.push(marker);

        } 
        console.log(path[tegu_name[j]]);
    }

    line[tegu_name[j]] = new google.maps.Polyline({
        path: path[tegu_name[j]],
        strokeColor: '#32cd32',
        strokeOpacity: 0.6,
        strokeWeight: 3
    });
    line[tegu_name[j]].setMap(map);


}

score 4 · Accepted Answer · answered May 30 '12 at 03:30

4

It looks like your path[tegu_name[j]] = ... line (755) should be outside the k loop, otherwise the array is created anew on each iteration of k.

answered May 30 '12 at 03:30

Steve

6,618
3
44
42

Bergi · Answer 2 · 2012-05-30T06:08:58.583

No, with the .push() method nothing gets overwritten. It's the path[tegu_name[j]] = new Array(); that overwrites the array each time.

Yet, there are some other correction/simplifications to be made.

marker_container is an Array. Don't use a for-in-loop here (beginning of the changeDate function)
telemetry_data is an Object with properties. You should use a for-in-loop in here, instead of creating an array of property names (tegu_name) and iterating over that.

var tegu_location;
var path = new Object();
var line = new Object();

//For each tegu
for (var tegu in telemetry_data) {
    path[tegu] = new Array();
    //For each date
    for (var k = 0; k < telemetry_data[tegu].length; k++) {
        var keys = telemetry_data[tegu][k];
        if (keys[0] <= date) {
            console.log("use "+ tegu +" point ("+keys[1]+", "+keys[2]+") at date "+keys[0]);
            path[tegu].push(tegu_location = new google.maps.LatLng(keys[1], keys[2]));
        } else {
            if (tegu_location) {
                marker = new google.maps.Marker({
                  icon: point_tracked,
                  shape: point_shape,
                  map: map,
                  position: tegu_location
                });
                marker_container.push(marker);
            }
        } 
    }
    console.log(path[tegu]);

    line[tegu] = new google.maps.Polyline({
        path: path[tegu],
        strokeColor: '#32cd32',
        strokeOpacity: 0.6,
        strokeWeight: 3
    });
    line[tegu].setMap(map);
}

Ah! As I was writing that code, I found myself wondering what the deal with "for x in y" vs. "for i < y.length" loops was. I didn't realize "for in" loops were reserved for objects. Thank you! I will do some tidying up tomorrow. — petroica, May 30 '12 at 06:02

Javascript: Objects pushed into array overriding each other?

2 Answers2