如何獲取多個同名鍵的JSON值

我有一個 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和https://live.staticflickr.com/2817/33807326532_91013ef6b1_h_d.jpg)

我嘗試了一些代碼，但總的來說我對 JSON 很陌生，我已經看過一些其他的關于 JSON 的答案，但我不太確定如何實作我想要的。

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

我感謝所有建議，包括指向我可能錯過的其他答案的鏈接。謝謝！

uj5u.com熱心網友回復：

url是物件的屬性。一個media陣列中可以有很多。（此資料僅顯示每個陣列一個物件。）media本身是content陣列內物件的一個??屬性。

使用map, 和flatMap。

map從 中的物件回傳 URL 值media，并flatMap回傳由 回傳的嵌套陣列的平面陣列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)

uj5u.com熱心網友回復：

最簡單的方法是使用map函式。鑒于您對編程非常陌生（解決方案與 JSON 本身關系不大，因為第一步是將 JSON 字串決議為 JavaScript 物件），您最好自己嘗試一下。但你開始

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

有關map功能的更多資訊，請看這里

uj5u.com熱心網友回復：

表中有一張表，所以對于每張表：

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

uj5u.com熱心網友回復：

要訪問物件屬性，可以使用點 ( .)，要訪問陣列元素，可以使用方括號 ( []) 中的索引。因此，您只需根據需要不斷重復這些步驟，直到找到您要查找的內容。

以下是簡化版本的物件的外觀，使用forEach陣列的方法將自定義函式應用于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;
}

標籤：javascript json

上一篇：如果在ReactJS中多次選中復選框，如何禁用按鈕

下一篇：將游標和焦點放在contenteditabledivonclick