Access and extract values from doubly nested array of objects in JavaScript

Question

I have an array of objects and within those objects is another object which contains a particular property which I want to get the value from and store in a separate array.

How do I access and store the value from the name property from the data structure below:

pokemon:Object
abilities:Array[2]
  0:Object
    ability:Object
      name:"blaze"
  1:Object
    ability:Object
      name:"solar-power"

How would I return and display the values in the name property as a nice string like

blaze, solar-power ?

I tried doing something like this but I still get an array and I don't want to do a 3rd loop since that is not performant.

 let pokemonAbilities = [];
 let test = pokemon.abilities.map((poke) =>
        Object.fromEntries(
          Object.entries(poke).map(([a, b]) => [a, Object.values(b)[0]])
        )
      );

      test.map((t) => pokemonAbilities.push(t.ability));

Sample Data:

"pokemon": {
  "abilities": [
    {
      "ability": {
        "name": "friend-guard",
        "url": "https://pokeapi.co/api/v2/ability/132/"
      },
      "ability": {
        "name": "Solar-flare",
        "url": "https://pokeapi.co/api/v2/ability/132/"
      }
    }
  ]
}

Then I am doing a join on the returned array from above to get a formatted string.

It just seems like the multiple map() loops can be optimized but I am unsure how to make it more efficient.

Thank you.

what does the data actually look like? I mean, put something in the code block that we can use directly in the solution. — Chris Strickland
– Chris Strickland, Commented Apr 29, 2022 at 22:07
@ChrisStrickland there you go, sir. Posted some real data formatted to work with. — CodeConnoisseur
– CodeConnoisseur, Commented Apr 29, 2022 at 22:10
@PA-GW Are you sure that given data is correct? Array named abilities has one object with 2 same name (ability) properties. I think you wanted 2 objects with where both of them has property named ability — EzioMercer
– EzioMercer, Commented Apr 29, 2022 at 22:25
the sample data you gave is incorrectly formatted. abilities should be an array of objects, each object containing a key "ability" with "name" and "url". you didn't reproduce it correctly from the API sample. see answer below for the correct format. — Szaman
– Szaman, Commented Apr 29, 2022 at 22:50

Szaman · Accepted Answer · 2022-04-29 22:46:35Z

2

There is no need for a loop within loop. Try this:

const pokemon = {
  abilities: [{
    ability: {
      name: 'friend-guard',
      url: 'https://pokeapi.co/api/v2/ability/132/'
    },
  }, {
    ability: {
      name: 'Solar-flare',
      url: 'https://pokeapi.co/api/v2/ability/132/'
    }
  }]
};

const pokemonAbilities = pokemon.abilities.map(item => item.ability.name).join(', ');

console.log(pokemonAbilities);

edited Apr 29, 2022 at 22:46

Szaman

2,4161 gold badge19 silver badges34 bronze badges

answered Apr 29, 2022 at 22:14

EzioMercer

2,1492 gold badges11 silver badges30 bronze badges

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

6 Comments

Evren Over a year ago

Data type you used in your answer not same data from question. Objects inside the object in question

EzioMercer Over a year ago

@Evren You are right! But I posted my answer before he gave real data. I just didn't have time to fix :)

CodeConnoisseur Over a year ago

Yes sorry the code above doesn't work because abilities has nested ability object inside of it.

EzioMercer Over a year ago

@PA-GW Couple of minutes pls :)

CodeConnoisseur Over a year ago

Positive, you can see the docs for yourself pokeapi.co/docs/v2

|

Collectives™ on Stack Overflow

Access and extract values from doubly nested array of objects in JavaScript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related