如何获取多个同名键的JSON值

Question

我有一个 JSON 数据集如下：

{
   "content":[],
   "layout":[],
   "trail":[
      {
         "content":[
            {
               "type":"image",
               "media":[
                  {
                     "type":"image/jpg",
                     "width":593,
                     "height":900,
                     "url":"https://live.staticflickr.com/65535/48208920877_e6b234d3ea_c_d.jpg",
                     "flickr":{
                        "flickr-post":"https://www.flickr.com/photos/riketrs/48208920877",
                        "flickr-album":"https://www.flickr.com/photos/riketrs/albums/72157709130951466"
                     }
                  }
               ]
            },
            
            {
               "type":"image",
               "media":[
                  {
                     "type":"image/jpg",
                     "width":1600,
                     "height":900,
                     "url":"https://live.staticflickr.com/2817/33807326532_91013ef6b1_h_d.jpg",
                     "flickr":{
                        "flickr-post":"https://www.flickr.com/photos/146758538@N03/33807326532",
                        "flickr-album":"https://www.flickr.com/photos/146758538@N03/albums/72157681438471236"
                     }
                  }
               ]
            }
         ],
         
         "colors":{
            "c0":"#1e1e1d",
            "c1":"#78736f",
            "c2":"#b2a89f"
         }
      }
   ]
}

我想为此处显示的每个图像console.log记录"url"键。 ( https://live.staticflickr.com/65535/48208920877_e6b234d3ea_c_d.jpg and https://live.staticflickr.com/2817/33807326532_91013ef6b1_h_d.jpg )

我尝试了一些代码，但总的来说我对 JSON 很陌生，我已经查看了与 JSON 相关的其他一些答案，但我不太确定如何实现我想要的。

JSFiddle： https://jsfiddle.net/fj6qveh1/1/

我感谢所有建议，包括我可能错过的其他答案的链接。 谢谢！

Answer 1

url是 object 的属性。 在一个media数组中可以有很多这样的。 （此数据仅显示每个数组一个 object。） media本身是content数组内对象的属性。

使用map和flatMap 。

map to return the URL values from the objects in media , and flatMap to return a flat array of the nested arrays returned by map .

 const data={content:[],layout:[],trail:[{content:[{type:"image",media:[{type:"image/jpg",width:593,height:900,url:"https://live.staticflickr.com/65535/48208920877_e6b234d3ea_c_d.jpg",flickr:{"flickr-post":"https://www.flickr.com/photos/riketrs/48208920877","flickr-album":"https://www.flickr.com/photos/riketrs/albums/72157709130951466"}}]},{type:"image",media:[{type:"image/jpg",width:1600,height:900,url:"https://live.staticflickr.com/2817/33807326532_91013ef6b1_h_d.jpg",flickr:{"flickr-post":"https://www.flickr.com/photos/146758538@N03/33807326532","flickr-album":"https://www.flickr.com/photos/146758538@N03/albums/72157681438471236"}},{type:"image/jpg",width:1600,height:900,url:"https://live.dummyimage.com/2817/dummy.jpg",flickr:{"flickr-post":"https://www.flickr.com/photos/146758538@N03/33807326532","flickr-album":"https://www.flickr.com/photos/146758538@N03/albums/72157681438471236"}}]}],colors:{c0:"#1e1e1d",c1:"#78736f",c2:"#b2a89f"}}]}; const content = data.trail[0].content; const urls = content.flatMap(obj => { return obj.media.map(inner => inner.url); }); console.log(urls)

Answer 2

最简单的方法是使用map function。 鉴于您对编程非常陌生（该解决方案与 JSON 本身没什么关系，因为第一步是将 JSON 字符串解析为 JavaScript 对象，如果您自己尝试会更好） 但你从

let urls = trail["content"].map(x => x["media"][0]["url"])

更多关于map function 看这里

Answer 3

表中有一个表，因此对于每个表：

for(let i in trail){    
    var content = trail[i]["content"];
  content.forEach(content => content.media.forEach(media => console.log(media.url)))
}

Answer 4

要访问 object 属性，可以使用点 ( . )，要访问数组元素，可以使用方括号 ( [] ) 中的索引。 因此，您只需根据需要不断重复这些步骤，直到找到您正在寻找的内容。

这是 object 的简化版本的外观，使用 arrays 的forEach方法将自定义 function 应用于content数组中的每个项目：

 const json = getJson(); json.trail[0].content.forEach(item=>console.log(item.media[0].url)); function getJson(){ let obj = { "trail": [{ "content": [ { "media": [{ "url":"image #65535/48208920877_e6b234d3ea_c_d.jpg" }]}, { "media": [{"url":"image #2817/33807326532_91013ef6b1_h_d.jpg"}]} ] }] }; return obj; }