Looping through json with multiple arrays

Question

I'm pulling out images from Instagram using json and jQuery.

The json data contains objects and arrays. Somehow I can't loop though the second array on my way down to the values I need.

This is my code:

var request = "./myapi.php?user=jamieoliver"; //&callback=myFunction
$.ajax({
  cache: false,
  dataType: "json", // or "jsonp" if we enabled it
  url: request,
  success: function(response) {
    console.log(response);
    for (var i = 0; i < response.entry_data.ProfilePage.length; i++) {
      console.log(response.entry_data.ProfilePage[i].user.media.nodes[i].thumbnail_src);
    }
  },
  error: function(xhr, status, error) {}
});

The problem seens to be here: nodes[i] - nodes[] is an array - and my code doesn't loop through it - it only gives me the value inside the first object inside nodes[]. How do I loop through nodes[] in order to get the value of thumbnail_src inside each of its objects?

I don't have live data but here's a screenshot of the structure of the json response:

I would rather say the better option is to use a advanced or a for loop for object. — Shiv Kumar Ganesh
– Shiv Kumar Ganesh, Commented Nov 25, 2016 at 13:58

Fefux · Accepted Answer · 2016-11-25 13:56:03Z

4

Something like this :

var request = "./myapi.php?user=jamieoliver"; //&callback=myFunction
$.ajax({
  cache: false,
  dataType: "json", // or "jsonp" if we enabled it
  url: request,
  success: function(response) {
    console.log(response);
    for (var i = 0; i < response.entry_data.ProfilePage.length; i++) {
        for (var j = 0; j < response.entry_data.ProfilePage[i].user.media.nodes.length; j++) {
          console.log(response.entry_data.ProfilePage[i].user.media.nodes[j].thumbnail_src);
       }
    }
  },
  error: function(xhr, status, error) {}
});

answered Nov 25, 2016 at 13:56

Fefux

9845 silver badges12 bronze badges

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

Comments

xWaZzo · Accepted Answer · 2016-11-25 14:08:20Z

1

You should loop again using another for:

var request = "./myapi.php?user=jamieoliver"; //&callback=myFunction
$.ajax({
  cache: false,
  dataType: "json", // or "jsonp" if we enabled it
  url: request,
  success: function(response) {
    console.log(response);
    var nodes;
    for (var i = 0; i < response.entry_data.ProfilePage.length; i++) {
      nodes = response.entry_data.ProfilePage[i].user.media.nodes;

      for (var n = 0; n < nodes.length; n++) { 
        console.log(nodes[n].thumbnail_src);
      }
    }
  },
  error: function(xhr, status, error) {}
});

answered Nov 25, 2016 at 14:08

xWaZzo

7585 silver badges19 bronze badges

3 Comments

xWaZzo Over a year ago

Damn, It took me too long to answer. Well, I suggest a cleaner way to loop through the 2nd for using var nodes; so you can read and understand it faster.

Meek Over a year ago

This one is useful too. But isn't it possible to create some sort of function which automatically loops every array it encounters? I mean, so that we don't have to use multiple for loops?

xWaZzo Over a year ago

@Meek That's a good question. I have done that in PHP, but it has to be something similar in javascript. You have to make a function which loops every array/object it finds and then run the function inside itself if it finds another array/object. However I can not think how could we use that since in your example you were looking for an specific object entry_data.ProfilePage[i].user.media.nodes.

Collectives™ on Stack Overflow

Looping through json with multiple arrays

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related