Loop through each obj in a json call using jQuery or javascript

Question

I'm quite new to json/jQuery and javascript so I may be doing something glaringly stupid, so go easy on me. Also, I HAVE looked at questions asking similar things to what I'm asking, but I couldn't seem to get any of them to work for me.

What I am trying to do, is call json data from an API and get the "image.full" property for each object. The included JSfiddle shows what I am trying to accomplish, although I have statically assigned to get the image of a single character(object) "Aatrox" in this case. I have supplied sample data for two characters(objects) "Thresh" and "Aatrox"

Sample json data:

{
 "data": {
   "Thresh": {
     "id": "Thresh",
     "title": "the Chain Warden",
     "name": "Thresh",
     "image": {
        "w": 48,
        "full": "Thresh.png",
        "sprite": "champion3.png",
        "group": "champion",
        "h": 48,
        "y": 0,
        "x": 48
     },
     "key": "412"
  },
  "Aatrox": {
     "id": "Aatrox",
     "title": "the Darkin Blade",
     "name": "Aatrox",
     "image": {
        "w": 48,
        "full": "Aatrox.png",
        "sprite": "champion0.png",
        "group": "champion",
        "h": 48,
        "y": 0,
        "x": 0
     },
     "key": "266"
  },

HTML:

<div class="container-fluid">
    <div class="row" id="champs"></div>
</div>

jQuery:

$.getJSON('https://prod.api.pvp.net/api/lol/static-data/na/v1/champion?  champData=image&api_key=7d315bdf-c456-4792-b5d6-eadc7ef1672f', function (json) {
    var image = json.data.Aatrox.image.full;
    $('#champs').append('<div class="col-xs-4 col-md-1"><img   src="http://ddragon.leagueoflegends.com/cdn/4.3.18/img/champion/' + image + '"/></div>');
});

JSFIDDLE: http://jsfiddle.net/8S8LZ/2/

Question Summary: How can I loop through and get the "image.full" property of each object within data (ie: Thresh, Aatrox)? Also, I realize my API key is shown in this question, so I will be getting a new one after this is sorted out. :)

Any help is greatly appreciate, thanks.

Answer 1

This is quick and dirty, but if you loop through each object and access its image property in much the same way you're doing now, I modified your fiddle to create a list of objects:

$.getJSON('https://prod.api.pvp.net/api/lol/static-data/na/v1/champion?champData=image&api_key=7d315bdf-c456-4792-b5d6-eadc7ef1672f', function (json) {
    $.each(json.data, function(ix, obj) {

var image = obj.image.full;
$('#champs').append('<div class="col-xs-4 col-md-1"><img src="http://ddragon.leagueoflegends.com/cdn/4.3.18/img/champion/' + image + '"/></div>');
});

});

Here is my version of your fiddle: http://jsfiddle.net/dshell/zfF8u/

Answer 2

Let's break this apart:

• First, we need to translate the object properties to an array, this is done with Object.keys
• Then, we can perform property access and return each full property, this is done with Array::map

Something like

var images = Object.keys(json.data).map(function(key){
    return json.data[key].image.full
});

(Fiddle)

Answer 3

Try this:

for (var prop in json.data) {
    if (json.data.hasOwnProperty(prop)) {
        console.log(prop.image.full);
    }
}

Answer 4

for (var k in json.data) {
    var image = json.data[k].image.full;
    $('#champs').append('<div class="col-xs-4 col-md-1"><img   src="http://ddragon.leagueoflegends.com/cdn/4.3.18/img/champion/' + image + '"/></div>');
}

Answer 5

You can simply use jquery like so:

$.each(data, function (key, value) {
    console.log(value.image.full);
});

See a demo .

Answer 6

You can simply assign the json.data to a variable and loop through it using jquery's each loop

var data = json.data;
$.each(data, function (key, value) {
    var full = value.image.full;  //alternatively value['image']['full'];

    // do whatever you want with full variable
});

Answer 7

This is how i would do it. Loop through the response, and then append it.

You want to save the selector in a variable because its faster than querying the dom each time in the loop.

Also here is a fork of your jsfiddle: http://jsfiddle.net/LwhT6/1/

$.getJSON('https://prod.api.pvp.net/api/lol/static-data/na/v1/champion?champData=image&api_key=7d315bdf-c456-4792-b5d6-eadc7ef1672f', function (json) {
    var $champContainer = $("#champs")

    for (var key in json.data) {
        var champ = json.data[key]
         ,  image = champ.image.full

        $champContainer.append('<div class="col-xs-4 col-md-1"><img src="http://ddragon.leagueoflegends.com/cdn/4.3.18/img/champion/' + image + '"/></div>')
    }
});

Answer 8

Can you try this ?

$.getJSON('https://prod.api.pvp.net/api/lol/static-data/na/v1/champion?champData=image&api_key=7d315bdf-c456-4792-b5d6-eadc7ef1672f', function( json ) {
    var image = json.data.Aatrox.image.full;    
    console.log(json);
    $.each(json.data,function(key,value){
        var name=value.image.full;
         $('#champs').append( '<div class="col-xs-4 col-md-1"><img src="http://ddragon.leagueoflegends.com/cdn/4.3.18/img/champion/' + name + '"/></div>');
    });
});