How to iterate JSON Array in Jquery

Question

I have this below type of array. I want to iterate this array in JavaScript. How is this possible?

{
"result": true,
"data": [
{
    "ID": 1,
    "stage_ID": 1,
    "badge_type_ID": 1,
    "name": "Despertar da Força",
    "description": "Fazer a primeira SuperAtividade",
    "type": "",
    "image_static": "url123.jpg",
    "image_animated": "",
    "SQL": "",
    "published": 1
},
{
    "ID": 2,
    "stage_ID": 1,
    "badge_type_ID": 1,
    "name": "Super 3",
    "description": "Fazer 3 SuperAtividades",
    "type": "",
    "image_static": "urlimage123.png",
    "image_animated": "",
    "SQL": "",
    "published": 1
}

etc

I tried the following script and it is returning "undefined", "undefined".

$.getJSON('https://www.legiaodossuperpoderes.com.br/chronus/api/adm/badges', function(data) {
        var output= "<ol>";
        for (var i in data) {
            output += "<li>" + data[i].ID + "</li>"
        }
        output+="</ol>";
        document.getElementById("placeholder").innerHTML=output;
    });

Any solutions ? Thanks!

i suppose, that function(data) contains the whole object. you need a reference to data of the object. — Nina Scholz
– Nina Scholz, Commented May 13, 2016 at 19:12
try console.log(data) to double check data return from getJSON — CY_
– CY_, Commented May 13, 2016 at 19:12
try data=data.data. And data[i] is properly a mistake because i is the value of the array not index. — gdlmx
– gdlmx, Commented May 13, 2016 at 20:34
@gdlmx i is not value of array it is index. if u use for(var i of data) mean it will be value of array — Deepak
– Deepak, Commented Dec 1, 2016 at 5:05

JRA · Accepted Answer · 2016-12-01 04:58:06Z

2

You can try converting to Json Object

$.getJSON('https://www.legiaodossuperpoderes.com.br/chronus/api/adm/badges', function(data) {
        var output= "<ol>";
        var jsondata = $.JSON.parse(data); // Json object Convertion
        for (var i in data) {
            output += "<li>" + data[i].ID + "</li>"
        }
        output+="</ol>";
        document.getElementById("placeholder").innerHTML=output;
    });

answered Dec 1, 2016 at 4:58

JRA

4876 silver badges19 bronze badges

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

Comments

Deepak Dixit · Accepted Answer · 2016-12-01 05:21:05Z

0

You are trying to access an undefined property using data[i].ID .

When you are getting response from your getJSON() function then you need to call the response with a name and then you can access any inner property using this name .

Now if you want to iterate using data key/value on myResponse variable then you need to do this.

$.getJSON('https://www.legiaodossuperpoderes.com.br/chronus/api/adm/badges', function(myResponse) {
    var output= "<ol>";
    var dataCount = myResponse.data.length;
    for (var i = 0; i < dataCount; i++) {
        output += "<li>" + myResponse.data[i].ID + "</li>";
    }
    output+="</ol>";
    document.getElementById("placeholder").innerHTML=output;
});

answered Dec 1, 2016 at 5:21

Deepak Dixit

1,6201 gold badge17 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to iterate JSON Array in Jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related