loop through a json object in ajax response

Question

I am new to json so i am getting a json reponse from my ajax call

now i am stuck with looping the json object

here is my json

 {
    "0": {
        "image": "http://test.com/systems.jpg",
        "anchor_tag_link": "http://test.com/1",
        "title": "Oct-Dec-2013"
    },
    "1": {
        "image": "http://test.com/energy.jpg",
        "anchor_tag_link": "http://test.com/1",
        "title": "July-Sept-2013"
    },
    "pages": 2
}

Can anyone help

$array = json_decode("json string",true); ?? Then loop the array — Parfait, Sep 03 '14 at 05:31

score 4 · Accepted Answer · answered Sep 03 '14 at 05:39

4

You can use a for-in loop as follows:

var obj = {
  "0": {
    "image": "http://test.com/systems.jpg",
    "anchor_tag_link": "http://test.com/1",
    "title": "Oct-Dec-2013"
},
"1": {
    "image": "http://test.com/energy.jpg",
    "anchor_tag_link": "http://test.com/1",
    "title": "July-Sept-2013"
},
"pages": 2
}

for(var prop in obj) {
    var item = obj[prop];
    console.log(item);
}

Be aware that you will get the items in your log because you will get the pages property in addition to the numeric properties.

answered Sep 03 '14 at 05:39

Dave

10,748
3
43
54

hi thanks for your response, i am getting an error SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 540 of the JSON data – Dev Sep 03 '14 at 06:07
my mistake i had missed a semicolon on the servser side code. anyways it works fine.. Thank you :) – Dev Sep 03 '14 at 06:13

score 3 · Answer 2 · answered Sep 03 '14 at 05:45

Save your JSON response in a variable

var variable = {
    "0" : {
        "image" : "http://test.com/systems.jpg",
        "anchor_tag_link" : "http://test.com/1",
        "title" : "Oct-Dec-2013"
    },
    "1" : {
        "image" : "http://test.com/energy.jpg",
        "anchor_tag_link" : "http://test.com/1",
        "title" : "July-Sept-2013"
    },
    "pages" : 2
};

Then loop it using jquery

$.each(variable, function(index, value) {
    alert(value.image);
    alert(value.anchor_tag_link);
});

score 1 · Answer 3 · answered Sep 03 '14 at 05:38

1

you can do this.

var json = JSON.parse(data);// here data is your response
    for (var key in json) {

    alert(json[key].image);// other also in the same way.
    }

answered Sep 03 '14 at 05:38

Suchit kumar

11,809
3
22
44

score 0 · Answer 4 · answered Sep 03 '14 at 05:34

Example 1 :

 success: function(responseData) {
        for (var key in responseData) {
            alert(responseData[key]);
        }
    }

Example 2 :

<script>
    var data = '{"name": "mkyong","age": 30,"address": {"streetAddress": "88 8nd Street","city": "New York"},"phoneNumber": [{"type": "home","number": "111 111-1111"},{"type": "fax","number": "222 222-2222"}]}';
    var json = JSON.parse(data);

    alert(json["name"]); //mkyong
    alert(json.name); //mkyong

    alert(json.address.streetAddress); //88 8nd Street
    alert(json["address"].city); //New York

    alert(json.phoneNumber[0].number); //111 111-1111
    alert(json.phoneNumber[1].type); //fax

    alert(json.phoneNumber.number); //undefined
</script>

Sample Code

score 0 · Answer 5 · answered Sep 03 '14 at 05:34

Please try the following code. You only have to replace "yourJSONObject" by the JSON array.

    $.each( yourJSONObject, function( keyImg, valImg ) {
            image = valImg[0];
            anchor_tag_link = valImg[1];
            title = valImg[2];
    });

Regards,

score 0 · Answer 6 · answered Sep 03 '14 at 05:35

0

you can loop through this like looping through javascript object :

   for(var arg in object) {
     object.hasOwnProperty(arg) {
       process(object[arg]); 
     }
   }

answered Sep 03 '14 at 05:35

Ammaro

370
2
14

score 0 · Answer 7 · answered Sep 03 '14 at 05:44

JQuery:
var JSON = {
"0": {
    "image": "http://test.com/systems.jpg",
    "anchor_tag_link": "http://test.com/1",
    "title": "Oct-Dec-2013"
},
"1": {
    "image": "http://test.com/energy.jpg",
    "anchor_tag_link": "http://test.com/1",
    "title": "July-Sept-2013"
},
"pages": 2
};

if(JSON.pages >0)
{
   for(var i=0; i<JSON.pages; i++)
   {
    $('table').append('<tr><td>'+JSON[i].title+'</td><td>'+JSON[i].image+'</td><td>'+JSON[i].anchor_tag_link+'</td></tr>');
   }
}

HTML:
<table border="1"></table>

loop through a json object in ajax response

7 Answers7