How to get JSON values of multiple keys of the same name-CodePudding

I have a JSON data set as follows:

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

I would like to console.log the "url" key for each of the images shown here. (https://live.staticflickr.com/65535/48208920877_e6b234d3ea_c_d.jpg and https://live.staticflickr.com/2817/33807326532_91013ef6b1_h_d.jpg)

I tried some code but I'm very new to JSON in general, I've looked at some other answers to do with JSON but I'm not quite sure how to achieve what I want.

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

I appreciate all advice, including links to other answers that I potentially missed. Thank you!

CodePudding user response：

url is a property of an object. There can be many of these in a media array. (This data only shows one object per array.) media itself is an property of objects inside the content array.

Use map, and 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)

CodePudding user response：

The easiest way is to use map function. Given that you are very new to programming (the solution has little to do with JSON itself, since the first step is to parse JSON string to a JavaScript object), it would be better if you try yourself. But you start with

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

for more about map function look here

CodePudding user response：

There is a table in the table so for each table:

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

CodePudding user response：

To access object properties, you can use a dot (.), and to access an array element, you use its index in square brackets ([]). So you just keep repeating these steps as necessary until you get to the content you're looking for.

Here's how that looks on a simplified version of your object, using the forEach method of arrays to apply a custom function to each item in the content array:

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;
}