Read data from JSON in JQuery

Question

This might have been asked many times before, but I am not able to fetch the results from JSON when I am trying to alert it, it says undefined when I alert data.results.vote_sum or data.results.url or other nodes.

 $(document).ready(function() {
 function callJson() {
 $('.my-div').hide();
 var jqxhr = $.get("url", function(data) {
 console.log("success"); 
 alert(data.results.vote_sum); 
 alert(data.results.title);
 $('.my-div').prepend(data); 
 })
 .done(function() { console.log("second success"); })
 .fail(function() { console.log("error"); })
 .always(function() { console.log("finished"); $('.my-div').show(); }); 
 } 
 callJson();
 });
 <div class="my-div">
</div>

JSON is:

{
 "count":1,
 "results":[
 {
 "result_type":"article",
 "position":0,
 "comments_disabled":false,
 "label_names":[
 ],
 "vote_sum":0,
 "locale":"en-us",
 "section_id":1234,
 "url":"http://www.xyz.com",
 "id":200820164,
 "html_url":"http://www.xyz.com/123",
 "draft":false,
 "source_locale":"en-us",
 "title":"What are these sections and articles doing here?",
 "updated_at":"2014-02-07T23:46:17Z",
 "promoted":false,
 "name":"What are these sections and articles doing here?",
 "created_at":"2014-02-07T23:46:17Z",
 "translation_ids":[
 12345
 ],
 "author_id":123455,
 "vote_count":0
 }
 ],
 "previous_page":null,
 "facets":null,
 "next_page":null
}

Answer 1

Results is an array. So you should use like this

data.results[0].vote_sum

Answer 2

As result is an array. Try:

alert(data.results[0].vote_sum);

Answer 3

You are trying to fetch the value from results but results itself is an array.

Which gives "undefined" value when you try to get data.results.vote_sum

Instead you should go for data.results[0].vote_sum that gives the value "0" belonging to that particular "vote_sum" index in results array.

Please refer to fiddle link for demo.

• Mazzu: @Chunkz, Are you fine with the explanation? Or you need any further elaboration?

Answer 4

Try to use $.getJSON() instead of $.get() since you're working with JSON here:

var jqxhr = $.getJSON("url", function(data) {
 console.log("success"); 
 alert(data.results[0].vote_sum); 
 alert(data.results[0].title);
 $('.my-div').prepend(data); 
})

and change data.results to data.results[0] since results is an array.

Answer 5

data.results is an array and has no property called vote_sum and trying to access an undefined property should yield undefined So as others have noted you should index into the array data.results[0].vote_sum you also might want to be more explicit in your code. If you are always expecting JSON to be returned I'd suggest to use getJSON instead of get

 $.getJSON("url", function(data) {
 var result = data.results[0];
 console.log("success"); 
 alert(result.vote_sum); 
 alert(result.title);
 $('.my-div').prepend(data); 
 })

Answer 6

$.each(data,funciton(index,item){
 $.each(data[index].result,function(index,item){
 //now you can use all the objects
 alert(item.result_type)
 });
 });