使用 JS 迭代嵌套的 JSON 对象

Iterate over nested JSON Object using JS

本文关键字：JSON 对象 嵌套 JS 迭代 使用      更新时间：2023-09-26

我有这个从 api.moviedb.com 接收的JSON对象

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

这是对象的要点

我需要从图像海报数组中获取特定的"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"
    },

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

如果您将该 JSON 数据分配给一个字符串变量，例如称为 jsonString ，那么您可以使用这样的东西将其转换为 JS 对象：

var jsObject = JSON.parse(jsonString);

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

请注意，此技术不适用于 IE 7 和其他较旧的浏览器。请参阅 http://caniuse.com/json 的支持图表

相关文章：