Going through arrays in object with a loop

Question

I got several different arrays inside an object. I would like to go trough them with numeral value as I need to set them in a loop to different slots in accordion. Json file I'm getting the value looks kinda like this (Pokemon used for example):

{
  "Pokemon": {
    "FirePokemon": [
      {
        "name": "Vulpix",
        "speed": "10",
        "attack": "10",
        "defence": "10"
      },
      {
        "name": "Charmander",
        "speed": "10",
        "attack": "10",
        "defence": "10"
      }
    ],
    "WaterPokemon": [
      {
        "name": "Squirtle",
        "speed": "10",
        "attack": "10",
        "defence": "10"
      },
      {
        "name": "Wartortle",
        "speed": "10",
        "attack": "10",
        "defence": "10"
      }
    ],
    "GrassPokemon": [
      {
        "name": "Bulbasaur",
        "speed": "10",
        "attack": "10",
        "defence": "10"
      },
      {
        "name": "Oddish",
        "speed": "10",
        "attack": "10",
        "defence": "10"
      }
    ]
  }
}

I would like to call the data something like this:

function SetJsonDataToAccordion() {
    for (var i = 0; i < Object.keys(pokemondata).length; i++) {
        CreateAccordionContent(pokemondata[i], ".accordtitle"+i);
    }
}

pokemondata is the variable that gets all the Json data. Of course the pokemondata[i] does not work, but I would like to cycle the pokemon types like that swapping fire then water then grass, etc. in the loop without calling the arrays names. It all works if I just set it pokemondata.FirePokemon but I need to loop trough them. So is there a way you can loop trough the arrays in an object?

Answer 1

Iterate through both. With Object.keys you can get the list of pokemon types and with that information you can iterate through each pokemon.

var pokemonData = obj.Pokemon;
Object.keys(pokemonData).forEach(type => {
   // do something with pokemon type
   pokemonData[type].forEach(pokemon => {
      //do something with actual pokomen
   });
});

Answer 2

You can use for / in loop.

Based on your example: You need 3 nested loops.

var obj = {
  "Pokemon": {
    "FirePokemon": [{
        "name": "Vulpix",
        "speed": "10",
        "attack": "10",
        "defence": "10"
      },
      {
        "name": "Charmander",
        "speed": "10",
        "attack": "10",
        "defence": "10"
      }
    ],
    "WaterPokemon": [{
        "name": "Squirtle",
        "speed": "10",
        "attack": "10",
        "defence": "10"
      },
      {
        "name": "Wartortle",
        "speed": "10",
        "attack": "10",
        "defence": "10"
      }
    ],
    "GrassPokemon": [{
        "name": "Bulbasaur",
        "speed": "10",
        "attack": "10",
        "defence": "10"
      },
      {
        "name": "Oddish",
        "speed": "10",
        "attack": "10",
        "defence": "10"
      }
    ]
  }
};

for (var key1 in obj.Pokemon) {
  console.log("=======================");
  console.log(key1);
  console.log("=======================");

  for (var key2 in obj.Pokemon[key1]) {
    for (var key3 in obj.Pokemon[key1][key2]) {
      console.log(key3 + ": " + obj.Pokemon[key1][key2][key3]);
    }
    console.log("****");
  }
}