How to get all matching keys in nested objects

Question

I have a 'const' that returns an array of objects. Inside each of these objects is a key for 'image' and inside that object is a value for 'url' as shown below.


const images =[
    {
        "image": {
            "url": "imageUrlHere"
        }
    },
        {
            "image": {
                "url": "imageUrlHere"
            }
        },
        {
            "image": {
                "url": "imageUrlHere"
            }
        }
    ]

I can access each of these values individually by specifying an array index as seen below:

const imageUrls = images[0].image.url;

But what I need, is to create a new array from all of the image.url values, so I can output all of the images on my page.

Thanks!

you can use javascript map property to display all the images on your page — Hammad Hassan, Sep 01 '22 at 13:31
Does this answer your question? [From an array of objects, extract value of a property as array](https://stackoverflow.com/questions/19590865/from-an-array-of-objects-extract-value-of-a-property-as-array) — pilchard, Sep 02 '22 at 17:19

score 1 · Answer 1 · answered Sep 01 '22 at 13:31

You can do this with a simple map.

const images =[
    {
        "image": {
            "url": "imageUrlHere"
        }
    },
        {
            "image": {
                "url": "imageUrlHere"
            }
        },
        {
            "image": {
                "url": "imageUrlHere"
            }
        }
    ]
    
const urls = images.map(o => o.image.url)
console.log(urls)

How to get all matching keys in nested objects

1 Answers1