How can I map through a nested object in Javascript?

Question

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!

Unmitigated · Accepted Answer · 2021-07-07 22:16:17Z

3

Just destructure each property you need.

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

answered Jul 7, 2021 at 22:16

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Noa · Accepted Answer · 2021-07-07 22:28:01Z

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>

halfer · Accepted Answer · 2023-11-22 22:58:34Z

0

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.

edited Nov 22, 2023 at 22:58

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Jul 7, 2021 at 22:16

Itay Moav -Malimovka

53.8k68 gold badges198 silver badges292 bronze badges

Collectives™ on Stack Overflow

How can I map through a nested object in Javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related