Reputation: 75

Read data from JSON in JQuery

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
}

Upvotes: 0

Answers (6)

Mazzu

Reputation: 2849

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.

Upvotes: 1

Mir Gulam Sarwar

Reputation: 2648

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

    });
    });

Upvotes: 0

Rune FS

Reputation: 21752

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

Upvotes: 0

Felix

Reputation: 38112

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.

Upvotes: 0