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.

Danny · Accepted Answer · 2014-03-14 20:00:48Z

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/

This is exactly what I was looking for! Thanks. :) – Mathew MacLean Mar 14 at 19:49 — Mathew MacLean, Mar 14 at 19:49

Ananthan Unni · Answer 2 · 2014-03-14 19:57:55Z

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>');
    });
});

MBottens · Answer 3 · 2014-03-14 19:53:18Z

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>')
    }
});

palanik · Answer 4 · 2014-03-14 19:49:46Z

up vote 0 down vote

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>');
}

edited Mar 14 at 19:49

answered Mar 14 at 19:41

palanik
1,53916

add a comment |

mystic · Answer 5 · 2014-03-14 19:45:27Z

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
});

Bradley Trager · Answer 6 · 2014-03-14 19:44:59Z

up vote 0 down vote

You can simply use jquery like so:

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

See a demo.

answered Mar 14 at 19:44

Bradley Trager
1,3021619

add a comment |

user1257538 · Answer 7 · 2014-03-14 19:41:03Z

up vote 0 down vote

Try this:

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

answered Mar 14 at 19:41

user1257538
23517

Why are you performing that .hasOwnProperty check? – Benjamin Gruenbaum Mar 14 at 19:43

checking that is standard for iterating through a JSON. It allows you to make sure you're looking at an actual JSON property and not something else like a function of the objects prototype. – user1257538 Mar 14 at 19:46

Why would the object's prototype have any enumerable functions o_0? – Benjamin Gruenbaum Mar 14 at 19:49

i'm not sure if it's necessary to have in there – user1257538 Mar 14 at 19:52

add a comment |

Benjamin Gruenbaum · Answer 8 · 2014-03-14 19:39:26Z

up vote 1 down vote

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)

answered Mar 14 at 19:39

Benjamin Gruenbaum
50.3k1497170

How would I incorporate my $.getJSON into that? – Mathew MacLean Mar 14 at 19:40

@MathewMacLean I'm not sure I understand what you're asking here, you'd put that code inside your $.getJSON? – Benjamin Gruenbaum Mar 14 at 19:42

1

What would that look like all tied together? I'm trying it and it I can't seem to get it working. – Mathew MacLean Mar 14 at 19:47

1

@MathewMacLean it returns an array. You use the code in order to grab the images and then use a for loop to iterate through them. – Benjamin Gruenbaum Mar 14 at 19:48

add a comment |

asked	6 months ago
viewed	417 times
active	6 months ago

current community

your communities

more stack exchange communities

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

8 Answers 8

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript jquery html css json or ask your own question.

Hot Network Questions

current community

your communities

more stack exchange communities

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

8 Answers 8

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript jquery html css json or ask your own question.

Related

Hot Network Questions