使用JS迭代嵌套的JSON对象

时间:2012-04-22 20:11:04

标签: javascript jquery json

我有这个JSON对象,我从api.movi​​edb.com

收到

它是非常嵌套的JSON对象,我在从中检索特定数据时遇到了问题。

Here's对象的要点

我需要从图像海报数组

中专门获取“url”

我尝试使用此$ .each

迭代它

但问题是var图像因未定义而抛出错误

  $.each(data, function(i,item){
          images = data.posters.image.url;
          var name = "<div id='each'><p>" + item.name + "</p><br><img src=" + image + "><br><p>" + item.overview + "</p></div>";
          $("#result").append(name);
     //$("<img/>").attr("src", item.image).appendTo("#result");
  });

[
    {
        "score": null,
        "popularity": 3,
        "translated": true,
        "adult": false,
        "language": "en",
        "original_name": "Masculin feminin",
        "name": "Masculin feminin",
        "alternative_name": "Masculin féminin oder: Die Kinder von Marx und Coca Cola",
        "movie_type": "movie",
        "id": 4710,
        "imdb_id": "tt0060675",
        "url": "http://www.themoviedb.org/movie/4710",
        "votes": 7,
        "rating": 10,
        "runtime": 110,
        "certification": "",
        "overview": "The film stars French New Wave icon Jean-Pierre Léaud as Paul, a romantic young idealist and literary lion-wannabe who chases budding pop star, Madeleine (Chantal Goya, a real life Yé-yé girl).",
        "released": "1966-03-22",
        "posters": [
            {
                "image": {
                    "type": "poster",
                    "size": "thumb",
                    "height": 130,
                    "width": 92,
                    "url": "http://cf2.imgobject.com/t/p/w92/issm1E827fK7KHMEdRORA9BoTPs.jpg",
                    "id": "4ea5ebb234f8633bdc0020cb"
                }
            },
            {
                "image": {
                    "type": "poster",
                    "size": "w154",
                    "height": 217,
                    "width": 154,
                    "url": "http://cf2.imgobject.com/t/p/w154/issm1E827fK7KHMEdRORA9BoTPs.jpg",
                    "id": "4ea5ebb234f8633bdc0020cb"
                }
            },
            {
                "image": {
                    "type": "poster",
                    "size": "cover",
                    "height": 261,
                    "width": 185,
                    "url": "http://cf2.imgobject.com/t/p/w185/issm1E827fK7KHMEdRORA9BoTPs.jpg",
                    "id": "4ea5ebb234f8633bdc0020cb"
                }
            },
            {
                "image": {
                    "type": "poster",
                    "size": "w342",
                    "height": 482,
                    "width": 342,
                    "url": "http://cf2.imgobject.com/t/p/w342/issm1E827fK7KHMEdRORA9BoTPs.jpg",
                    "id": "4ea5ebb234f8633bdc0020cb"
                }
            },
            {
                "image": {
                    "type": "poster",
                    "size": "mid",
                    "height": 704,
                    "width": 500,
                    "url": "http://cf2.imgobject.com/t/p/w500/issm1E827fK7KHMEdRORA9BoTPs.jpg",
                    "id": "4ea5ebb234f8633bdc0020cb"
                }
            },
            {
                "image": {
                    "type": "poster",
                    "size": "original",
                    "height": 938,
                    "width": 666,
                    "url": "http://cf2.imgobject.com/t/p/original/issm1E827fK7KHMEdRORA9BoTPs.jpg",
                    "id": "4ea5ebb234f8633bdc0020cb"
                }
            }
        ],
        "backdrops": [
            {
                "image": {
                    "type": "backdrop",
                    "size": "thumb",
                    "height": 172,
                    "width": 300,
                    "url": "http://cf2.imgobject.com/t/p/w300/AnnWas1TyMRRyFuNT9bCZoeqg3t.jpg",
                    "id": "4ea5ebb734f8633bdc0020cf"
                }
            },
            {
                "image": {
                    "type": "backdrop",
                    "size": "poster",
                    "height": 448,
                    "width": 780,
                    "url": "http://cf2.imgobject.com/t/p/w780/AnnWas1TyMRRyFuNT9bCZoeqg3t.jpg",
                    "id": "4ea5ebb734f8633bdc0020cf"
                }
            },
            {
                "image": {
                    "type": "backdrop",
                    "size": "w1280",
                    "height": 736,
                    "width": 1280,
                    "url": "http://cf2.imgobject.com/t/p/w1280/AnnWas1TyMRRyFuNT9bCZoeqg3t.jpg",
                    "id": "4ea5ebb734f8633bdc0020cf"
                }
            },
            {
                "image": {
                    "type": "backdrop",
                    "size": "original",
                    "height": 768,
                    "width": 1336,
                    "url": "http://cf2.imgobject.com/t/p/original/AnnWas1TyMRRyFuNT9bCZoeqg3t.jpg",
                    "id": "4ea5ebb734f8633bdc0020cf"
                }
            }
        ],
        "version": 463,
        "last_modified_at": "2012-04-20 11:05:03 UTC"
    },

2 个答案:

答案 0 :(得分:2)

$.each(data, function(i,item){
    var name = item.name;
    var overview = item.overview;
    $.each(item.posters, function(i,poster){
        var name = "<div id='each'><p>" + name + "</p><br><img src=" + poster.image.url + "><br><p>" + overview + "</p></div>";
        $("#result").append(name);
    }
 });

答案 1 :(得分:0)

如果将JSON数据分配给字符串变量,比如名为jsonString,那么您可以使用类似的东西将其转换为JS对象:

var jsObject = JSON.parse(jsonString);

然后您可以通过常规机制访问属性。因此,要获取第一张海报的网址:jsObject.posters[0].image.url

请注意,此技术在IE 7和其他旧版浏览器中无法使用。请参阅http://caniuse.com/json

上的支持图表