Displaying data from json file using jquery

Question

I am trying to display data from json file on a html page.

This is the json file:

{"id":770672122,"title":"Toy Story 3","year":2010,"genres":["Animation","Kids & Family","Science Fiction & Fantasy","Comedy"],"mpaa_rating":"G","runtime":103,"critics_consensus":"Deftly blending comedy, adventure, and honest emotion, Toy Story 3 is a rare second sequel that really works.","release_dates":{"theater":"2010-06-18","dvd":"2010-11-02"},"ratings":{"critics_rating":"Certified Fresh","critics_score":99,"audience_rating":"Upright","audience_score":89},"synopsis":"Pixar returns to their first success with Toy Story 3. The movie begins with Andy leaving for college and donating his beloved toys -- including Woody (Tom Hanks) and Buzz (Tim Allen) -- to a daycare. While the crew meets new friends, including Ken (Michael Keaton), they soon grow to hate their new surroundings and plan an escape. The film was directed by Lee Unkrich from a script co-authored by Little Miss Sunshine scribe Michael Arndt. ~ Perry Seibert, Rovi","posters":{"thumbnail":"http://content6.flixster.com/movie/11/13/43/11134356_mob.jpg","profile":"http://content6.flixster.com/movie/11/13/43/11134356_pro.jpg","detailed":"http://content6.flixster.com/movie/11/13/43/11134356_det.jpg","original":"http://content6.flixster.com/movie/11/13/43/11134356_ori.jpg"},"abridged_cast":[{"name":"Tom Hanks","id":"162655641","characters":["Woody"]},{"name":"Tim Allen","id":"162655909","characters":["Buzz Lightyear"]},{"name":"Joan Cusack","id":"162655020","characters":["Jessie the Cowgirl"]},{"name":"Ned Beatty","id":"162672460","characters":["Lots-o'-Huggin' Bear","Lotso"]},{"name":"Don Rickles","id":"341817905","characters":["Mr. Potato Head"]}],"abridged_directors":[{"name":"Lee Unkrich"}],"studio":"Walt Disney Pictures","alternate_ids":{"imdb":"0435761"},"links":{"self":"http://api.rottentomatoes.com/api/public/v1.0/movies/770672122.json","alternate":"http://www.rottentomatoes.com/m/toy_story_3/","cast":"http://api.rottentomatoes.com/api/public/v1.0/movies/770672122/cast.json","clips":"http://api.rottentomatoes.com/api/public/v1.0/movies/770672122/clips.json","reviews":"http://api.rottentomatoes.com/api/public/v1.0/movies/770672122/reviews.json","similar":"http://api.rottentomatoes.com/api/public/v1.0/movies/770672122/similar.json"}}

This is what I got so far:

$(document).ready(function() {

      // send off the query
      $.ajax({
        url:  baseUrl + query + moviesSearchUrl,
        dataType: "jsonp",
        success: searchCallback
      });
    });

    // callback for when we get back the results
    function searchCallback(data) {
     $(document.body).append('Found ' + data.total + ' results for ' + query);
     var genres = data.genres;
     $.each(genres, function(index, genre) {
       $(document.body).append('<h1>' + genre + '</h1>');
       $(document.body).append('<h1>' + ratings.critics_rating + '</h1>');
       $(document.body).append('<h1>' + title + '</h1>');


     });
    }

        </script>

I can retrieve data about genre but nothing else. My knowledge of jquery and json is very limited and I have search for quite a while and cannot find any solutions. I would be grateful for some assistance even if you could point me in the right direct. Thanks.

You haven't defined `ratings` or `title` anywhere. [Learn how to debug JavaScript](http://www.creativebloq.com/javascript/javascript-debugging-beginners-3122820) and have a look at [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) — Felix Kling, Apr 02 '14 at 21:13
Felix thank you! That's exactly what I needed really appreciate it! I am defining them as e.g. var ratings = data.ratings; is there a function to do them all together? — aazzaawwaazzaa, Apr 02 '14 at 21:22
You don't even have to declare variables for them. You can directly access the values where you want to put them with `data.ratings.critics_rating `, `data.title`, etc. — Felix Kling, Apr 02 '14 at 21:26

user2568864 · Answer 1 · 2014-04-02T21:20:01.600

0

You possibly did not declare the data when calling the function! success: searchCallback*

$.getJSON( baseUrl + query + moviesSearchUrl,function(data){
  searchCallback(data);
      });

Try this:

$(document).ready(function() {

  // send off the query
  $.getJSON( baseUrl + query + moviesSearchUrl,function(data){
  searchCallback(data);
      });

// callback for when we get back the results
function searchCallback(data) {
 $(document.body).append('Found ' + data.total + ' results for ' + query);
 var genres = data.genres;
 $.each(genres, function(index, genre) {
   $(document.body).append('<h1>' + genre + '</h1>');
   $(document.body).append('<h1>' + data.ratings.critics_rating + '</h1>');
   $(document.body).append('<h1>' + data.title + '</h1>');


 });
}

http://api.jquery.com/jquery.getjson/

edited Apr 02 '14 at 21:20

answered Apr 02 '14 at 21:13

user2568864

103
2

Why should the OP try that? Could you explain what's wrong with their code and how your solutions solves the problem? – Felix Kling Apr 02 '14 at 21:14
Still will not work since `ratings` and `title` are still undefined. – user13286 Apr 02 '14 at 21:17
*"You possibly did not declare the data when calling the function!"* I'm not sure what you mean by that, but since the OP writes *"I can retrieve data about genre but nothing else."* it means that `searchCallback` is successfully called and they actually can access the genres, just not the other data. The problem is only that the OP doesn't know how to access the other data. Switching to `$.getJSON` is not necessary. – Felix Kling Apr 02 '14 at 21:25

Mitchell Layzell · Answer 2 · 2014-04-02T21:33:55.243

It's because your each loop is only returning the genres as that's what you've told it to do, nest each of these inside of an object and then return that main object and you'll be able to access all the data for that item.

JSON

{
    "movies": [{
        "id": "1",
        "title": "Toy Story 3",
        "year": 1995
    },{
        "id": "2",
        "title": "A Bugs Life",
        "year": 2000
    }]
}

jQuery

$.ajax({
    type: 'POST',
    url: url,
    dataType: 'json'
}).done(function(data) { 

    var items = [];

    $.each(data.movies, function(i, item) { 

        console.log(item);
        /* Note your JSON has objects nested inside one another so for genres you'll
        need to do another loop for that object */
    });

});

Displaying data from json file using jquery

2 Answers2