Loop through JSON keys to add Google Maps data

Question

I found a lot of similar questions to this but none were useful for my particular problem. Basically, I have an AJAX call that fetches a dictionary of users along with their latitude and longitude.

$(function() {
  $.getJSON($SCRIPT_ROOT + '/_userInfo',
  function(data) {
    var userinfo = $("#userinfo").text(data.userinfo);
  });
})

This returns something like the following JSON:

{
  "userinfo": {
    "bob": [
      40.089158, 
      -88.239035, 
      "at home", 
      null, 
    ], 
    "sarah": [
      40.486545, 
      -89.00478, 
      "at work", 
      null, 
    ], 
    "michael": [
     40.089018, 
     -88.239361, 
     "in class", 
     null, 
    ]
  }
}

I don't know what the key names will be, so I'm not sure how to place the markers. To simply plot the points, I just need the first value (latitude) and the second value (longitude). I tried something like this, but it doesn't work:

var data = [
   for (var i = 0; i < data.userinfo.length; i++){
     new google.maps.LatLng(data.userinfo[i].[0], data.userinfo[i].[1]),
   }
];

map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

heatmap = new google.maps.visualization.HeatmapLayer({
    data: data,
    radius: 20
});

It doesn't recognize userinfo as a valid variable name. I'm not familiar with the syntax of AJAX, what am I doing wrong in either my AJAX call or the for loop for my map data?

Sarah · Accepted Answer · 2017-07-27 15:03:05Z

1

Aside from the syntax issue with the for inside an array definition, the issue is because userinfo is an object so you cannot loop through it as you can with an array.

Instead, you can use Object.keys to get the property names, then loop through those like this:

$(function() {
  $.getJSON($SCRIPT_ROOT + '/_userInfo', function(data) {
    var locations = [];
    Object.keys(data.userinfo).forEach(function(key) {
      var user = data.userinfo[key];
      locations.push(new google.maps.LatLng(user[0], user[1])) 
    });

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var heatmap = new google.maps.visualization.HeatmapLayer({
      data: locations,
      radius: 20
    });
    heatmap.setMap(map);
  });
})

edited Jul 27, 2017 at 15:03

Sarah

1191 silver badge13 bronze badges

answered Jul 27, 2017 at 14:41

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

5 Comments

Sarah Over a year ago

I thought this would work, but for some reason it doesn't like that second line and says "Reference Error: data is not defined."

Rory McCrossan Over a year ago

You need to run it within the function you provide for the callback to the AJAX request. I edited the answer to give you the full code.

Sarah Over a year ago

Thanks, this worked! I figured it had something do with where I was running it. Edited for some minor fixes.

Sarah Over a year ago

Just wondering if you could help me with this also: I'm trying to add an infowindow that displays the user's name (aka the key). What's the right way to access that key? Referring to user[key] or user doesn't work.

Rory McCrossan Over a year ago

Within the forEach loop, that's in the key variable

Collectives™ on Stack Overflow

Loop through JSON keys to add Google Maps data

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related