Looping through JSON results with jQuery

Question

I have the following JSON string:

{
    "responseHeader":{
        "status":0,
        "QTime":2,
        "params":{
            "facet":"false",
            "fl":"id,title,friendlyurl,avatar,locpath,objectid,objecttype",
            "indent":"off",
            "q":"title_search:*castle*",
            "wt":"json",
            "fq":"userid:\"C325D42C-A777-4275-BDD2-D7810A8AB9AB\"",
            "defType":"lucene"
        }
    },
    "response":{
        "numFound":2,
        "start":0,
        "docs":[
            {
                "title":"castle a",
                "objecttype":1,
                "friendlyurl":"castle-a",
                "avatar":"6_887_castle-a.JPG",
                "objectid":6
            },
            {
                "title":"castle b",
                "objecttype":1,
                "friendlyurl":"castle-b",
                "avatar":"794_360_13j-castle-by-night.jpg",
                "objectid":794
            }
        ]
    }

}

There are 2 search results in here: Castle A and Castle B

I want to loop through all results and get the value of the attributes title, objectype and friendlyurl

for testing purposes I simply assigned the JSON string to a variable 'data' I then tried:

    for (var i = 0, l = data.items.length; i < l; i++) {
        console.log(data.items[i].title);
        console.log(data.items[i].objecttype);
        console.log(data.items[i].friendlyurl);
    }

but then I get: Uncaught TypeError: Cannot read property 'length' of undefined

If I do:

    data = $.parseJSON(data);
    for (var i = 0, l = data.items.length; i < l; i++) {
        console.log(data.items[i].title);
        console.log(data.items[i].objecttype);
        console.log(data.items[i].friendlyurl);
    }

I get: Uncaught SyntaxError: Unexpected token C jquery-1.8.3.min.js:2

the line in the js file: e.JSON.parse(t);

I also tried:

    var data = '{"responseHeader":{"status":0,"QTime":1,"params":{"facet":"false","fl":"id,title,friendlyurl,avatar,locpath,objectid,objecttype","indent":"off","start":"0","q":"title_search:*castle*","wt":"json","fq":"userid:\"C325D42C-A777-4275-BDD2-D7810A8AB9AB\"","rows":"10","defType":"lucene"}},"response":{"numFound":2,"start":0,"docs":[{"title":"castle a","objecttype":1,"friendlyurl":"castle-a","avatar":"6_887_castle-a.JPG","objectid":6},{"title":"castle b","objecttype":1,"friendlyurl":"castle-b","avatar":"794_360_13j-castle-by-night.jpg","objectid":794}]}}'

    var result,
          size = data.result.docs.length,
          index;
    for (index = 0; index < size; index++) {
        result = data.result.docs[index];
        console.log(result.title);
    }

but that results in error: Uncaught TypeError: Cannot read property 'docs' of undefined.

http://stackoverflow.com/questions/2342371/jquery-loop-on-json-data-using-each — Saturnix, Sep 13 '13 at 07:04
Please note that the problem has **nothing** to do with JSON at all. It's rather about how to process arrays and objects in JavaScript. *How* you obtained the data (e.g. via JSON) is irrelevant to the problem. — Felix Kling, Sep 13 '13 at 07:09

score 3 · Answer 1 · answered Sep 13 '13 at 07:06

3

This is pretty basic JSON processing. Something like this should give you a start:

data = $.parseJSON(json);
$.each(data.response.docs, function(i, item) {
    console.log(item.title);
    console.log(item.objecttype);
    console.log(item.friendlyurl);
});

answered Sep 13 '13 at 07:06

Tim Dorr

4,861
2
21
24

Thx. I tried your suggestion, but got all sorts of errors, which I added to my question. Hope you can help me! :) – Adam Sep 13 '13 at 21:09

score 1 · Answer 2 · answered Sep 13 '13 at 07:08

1

You don't need jQuery you can use vanilla JavaScript like this (assume that this json is assigned to a var called json)

var result,
      size = json.result.docs.length,
      index;
for(index=0; index<size;index++) {
  result = json.result.docs[index];
  console.log(result.title);
}

answered Sep 13 '13 at 07:08

Jason Sperske

29,816
8
73
124

Thanks. I tried your suggestion but still receive errors, I updated my question with my results. Hope you can help! :) – Adam Sep 13 '13 at 21:13

score 0 · Answer 3 · answered Sep 13 '13 at 07:18

You have to loop trough all the json object properties and look for the key values you need. A basic operation would consist in an ajax call having as parameter the object returned by the call, then with a for each loop you can check the object properties you need.

This is a how should look a basic operation:

$.ajax({ 
    url: 'url_to_json.json',    
    dataType: 'json', // Choosing a JSON datatype
    success: function(data) // Variable data contains the data we get from JSON
    {           
        $.each(data, function(filterGroupKey, filterGroupValue){    
                if (filterGroupValue && filterGroupValue.hasOwnProperty('title')){
                    var filterTagModel = filterGroupValue;                  
                    filterTagModel.title =  filterGroupValue['title'];
                    filterTagModel.objectType =  filterGroupValue['objecttype'] ;
                    filterTagModel.friendlyUrl = filterGroupValue['friendlyurl'];
                }
            });        
    }
});

Then you can use the filterTagModel and all it's properties to manipulate the data obtained.

Looping through JSON results with jQuery

3 Answers3