使用jquery从json文件显示数据

时间:2014-04-02 21:10:32

标签: jquery json

我正在尝试在html页面上显示json文件中的数据。

这是json文件:

{"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"}}

这是我到目前为止所得到的:

$(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>

我可以检索有关流派的数据,但没有别的。我对jquery和json的了解非常有限,我已经搜索了很长时间,找不到任何解决方案。即使你可以直接指出我,我也会感激一些帮助。 感谢。

2 个答案:

答案 0 :(得分:0)

调用函数时可能没有声明数据! 成功:searchCallback *

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

试试这个:

$(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/

答案 1 :(得分:0)

这是因为你的每个循环只返回你已经告诉它要做的那些类型,将这些类型嵌入到一个对象中,然后返回那个主要对象,然后你&&&&&& #39;将能够访问该项目的所有数据。

<强> 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 */
    });

});