CODEWITHSUNDEEP
javascript
Király Roland
Király Roland

Reputation: 161

How can I map through a nested object in Javascript?

I have an object which looks like this:

const jewels = {
    infantry: {
        '3OayPUASk1JJFJwpKW7u': {
            id: '3OayPUASk1JJFJwpKW7u',
            name: 'Infantry ATK Jewel ',
            url: 'https://lordsmobilepro.com/wp-content/uploads/2021/01/Infantry-ATK-Jewel.jpg',
            effects: ['Inf ATK 20%'],
        },
        '5N3y7DfjZwFTPxoyg3La': {
            id: '5N3y7DfjZwFTPxoyg3La',
            name: 'Terror Jewel',
            url: 'https://lordsmobilepro.com/wp-content/uploads/2021/01/Terror-Jewel.jpg',
            effects: ['Inf ATK 10%', 'Inf DEF 10%'],
        },
        '7mOdjVqp9co87Ymkvk9F': {
            id: '7mOdjVqp9co87Ymkvk9F',
            name: 'Trojan Jewel',
            url: 'https://lordsmobilepro.com/wp-content/uploads/2021/01/Trojan-Jewel.jpg',
            effects: ['Inf HP 15%', 'Travel Speed 5%'],
        },
    } etc ....

I would like to map the object so it would look like this for every item:

<h1>{infantry.name}</h1>
<img src='`${infantry.url}`'/> 
<h2>{infantry.effects}<h2/>

I did something like this:

const output = Object.values(jewels.infantry).map(({ name }) => (name));

My logic is obviously flawed here, I couldn't figure out how can I map multiple properties, I just mapped the name. I would appreciate some help!

Upvotes: 1

Views: 60

Answers (3)

Itay Moav -Malimovka
Itay Moav -Malimovka

Reputation: 53597

Use Object.keys() on jewels.infantry to get all the key values as an array. Them use map or for on that array.

Since you have the id also as a field inside the object, you can use Object.values() directly as suggested by @Unmitigated.

Upvotes: 0

Noa
Noa

Reputation: 1216

try this.

    const jewels = {
        infantry: {
            '3OayPUASk1JJFJwpKW7u': {
                id: '3OayPUASk1JJFJwpKW7u',
                name: 'Infantry ATK Jewel ',
                url: 'https://lordsmobilepro.com/wp-content/uploads/2021/01/Infantry-ATK-Jewel.jpg',
                effects: ['Inf ATK 20%'],
            },
            '5N3y7DfjZwFTPxoyg3La': {
                id: '5N3y7DfjZwFTPxoyg3La',
                name: 'Terror Jewel',
                url: 'https://lordsmobilepro.com/wp-content/uploads/2021/01/Terror-Jewel.jpg',
                effects: ['Inf ATK 10%', 'Inf DEF 10%'],
            },
            '7mOdjVqp9co87Ymkvk9F': {
                id: '7mOdjVqp9co87Ymkvk9F',
                name: 'Trojan Jewel',
                url: 'https://lordsmobilepro.com/wp-content/uploads/2021/01/Trojan-Jewel.jpg',
                effects: ['Inf HP 15%', 'Travel Speed 5%'],
            },
        }
      };
        
        var output = Object.values(jewels.infantry).map(value => {
          return "<h1>" + value.name + "</h1><img src='`" + value.url + "`'/> <h2>" + value.effects + "<h2/>";
        
        });
        document.getElementById("result").innerHTML = output;
<div id="result"></div>

Upvotes: 0

Unmitigated
Unmitigated

Reputation: 89149

Just destructure each property you need.

const output = Object.values(jewels.infantry).map(({ name, url, effects }) => {
    // return what you need
});

Upvotes: 3

Related Questions