Outputting json data with deeper nesting

JavaScript
1

Hi all

I have been working on a google map adding some markers, works ok. The problem now is, I need to display markers from a new json object with deeper nesting. Not sure how to do this?

My first instance which works, using just a couple of markers for viewing purposes:

// The JSON data
var data = [{
	"title":"Arts",
	"lat": 51.425966,
	"lng": -0.564660},
	{
	"title":"Annexe",
	"lat": 51.425923,
	"lng": -0.562633}
];

// Looping through all the entries from the JSON data
  for(var i = 0; i < data.length; i++) {
    
    // Current object
    var obj = data[i];

    // Adding a new marker for the object
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(obj.lat,obj.lng),
      map: map,
      title: obj.title
    });
}

Now with my new json object, I have deeper nesting, not sure how I should amend the loop so I can display the markers?

// The JSON data
var data = {
  "markers": {
    "buildings": [
      {
        "title":"Arts",
        "lat": 51.425966,
        "lng": -0.564660},
      {
        "title":"Annexe",
        "lat": 51.425923,
        "lng": -0.562633}
    ],
    "places to eat": [
      {
        "title":"8bar",
        "lat": 51.436741,
        "lng": -0.563850},
      {
        "title":"Cafe",
        "lat": 51.427635,
        "lng": -0.563410}
    ],
    "sport": [
      {
        "title":"Fitness",
        "lat": 51.423456,
        "lng": -0.559371},
      {
        "title":"Pitches and Courts",
        "lat": 51.422538,
        "lng": -0.558422}
    ]
  }
}

My end goal will display each array of markers inside their own tab.

Any help thanks, Barry

2

Can anybody help with this?
I need a way of selecting the data at a deeper level from the updated json data.

So, instead of selecting data.title I need something like data.markers.buildings.title, if that makes sense. I’m thinking I might not need the markers wrapper? Thought it would be easier to select each individual array (buildings, places to eat, sport)… wrapper.sport and so on.

// Looping through all the entries from the JSON data
  for(var i = 0; i &lt; data.length; i++) {
    
    // Current object
    var obj = data[i];

    // Adding a new marker for the object
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(obj.lat,obj.lng),
      map: map,
      title: obj.title
    });
}

Any guidance, thanks,
Barry

3

Change

var obj = data[i];

to

var obj = data.markers.buildings[i];

That should be it.

4

Cool thanks mawburn,.
Just doing some testing, doesn’t seem to be working just yet.

Barry

5

Ok, I have created a fiddle showing where I’m up to with the updates - Example

As you can see, no markers are shown using: var obj = json.markers.buildings[i];

Can you spot what’s wrong?
FYI this code is now using json, not data as the variable.

The idea is mawburn, for each link in the footer to show the markers for each array.

Thanks, Barry

6

Yep, sorry. I wasn’t paying that close of attention. I read it as buildings being an array at first. You need to loop over the keys in the object. Similar to how you loop over an array.

Something like:

for(var place in data.markers) {
    var placeArr = data.markers[place];

    for(var i=0; i < placeArr.length; ++i) {
        var obj = placeArr[i];

        // do stuff
    }
}

more info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

7

Looks like a long night :smile:

Ok thanks, I’ll have a read see if I can get an understanding of what I need.

Cheers, Barry

8

Using a ‘for in’ loop to loop over the properties will work much better as properties are not numbered.

Using a for loop doesn’t work well with arrays either if there are any gaps in the numbers.

9

Are you saying this should be done a different way felgall?
Truth be said, struggling how to set this up.

Barry

10

Hi computerbarry,

Within the for…in loop, I’d then use the array’s forEach method to loop over the marker data and create a new Google Maps marker, adding them to a separate markers array as you go along:

var markers = [];

for(var place in data.markers) {

   data.markers[place].forEach(function(marker) {

      markers.push(
         new google.maps.Marker({
            position: new google.maps.LatLng(marker.lat, marker.lng),
            map: map,
            title: marker.title
         })
      );

   });

}
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.