PokeAPI + Angular: How to get pokemon's evolution chain

Question

I am an Angular novice and am learning a little by trying to pull the evolution chain for each pokemon using pokeapi but having a difficult time because of deep nesting.

A typical response object is returned like this:

{
  "baby_trigger_item": null,
  "id": 2,
  "chain": {
    "evolution_details": [],
    "evolves_to": [
      {
        "evolution_details": [
          {
            "min_level": 16,
            "min_beauty": null,
            "time_of_day": "",
            "gender": null,
            "relative_physical_stats": null,
            "needs_overworld_rain": false,
            "turn_upside_down": false,
            "item": null,
            "trigger": {
              "url": "http://pokeapi.co/api/v2/evolution-trigger/1/",
              "name": "level-up"
            },
            "known_move_type": null,
            "min_affection": null,
            "party_type": null,
            "trade_species": null,
            "party_species": null,
            "min_happiness": null,
            "held_item": null,
            "known_move": null,
            "location": null
          }
        ],
        "evolves_to": [
          {
            "evolution_details": [
              {
                "min_level": 36,
                "min_beauty": null,
                "time_of_day": "",
                "gender": null,
                "relative_physical_stats": null,
                "needs_overworld_rain": false,
                "turn_upside_down": false,
                "item": null,
                "trigger": {
                  "url": "http://pokeapi.co/api/v2/evolution-trigger/1/",
                  "name": "level-up"
                },
                "known_move_type": null,
                "min_affection": null,
                "party_type": null,
                "trade_species": null,
                "party_species": null,
                "min_happiness": null,
                "held_item": null,
                "known_move": null,
                "location": null
              }
            ],
            "evolves_to": [],
            "is_baby": false,
            "species": {
              "url": "http://pokeapi.co/api/v2/pokemon-species/6/",
              "name": "charizard"
            }
          }
        ],
        "is_baby": false,
        "species": {
          "url": "http://pokeapi.co/api/v2/pokemon-species/5/",
          "name": "charmeleon"
        }
      }
    ],
    "is_baby": false,
    "species": {
      "url": "http://pokeapi.co/api/v2/pokemon-species/4/",
      "name": "charmander"
    }
  }
}

I have to get to evolves_to property, and grab species.name as well as evolution_details.min_level and evolution_details.trigger.name, and evolution_details.item if not null

But as you can see, the evolves_to property, itself contains another evolves_to nested inside, which has another nested inside

This is my sad attempt (after http.get) and I'm just stuck now.

var evoObject = response.data;

function loopEvo(obj){
    angular.forEach(obj, function(value, key, object){
        if (key == 'evolves_to' && value != []) {
            //from here I can get top level data, but...
        }
    });
}

loopEvo(evoObject.chain);

I don't know how to recursively dive into objects and continually grab data, can anyone provide any help? I would love to use this as a great learning opportunity in traversing complex json objects.

Answer 1

You could always just avoid using Angular and stick with plain JS to build out your evolution chain... try giving this a go, it was based on your angular for loop. This should leave you with an array (evoChain) of the objects containing the data you are looking for ordered from first evolution at 0 index to last evolution at the last index.

var evoChain = [];
var evoData = response.data.chain;

do {
  var evoDetails = evoData['evolution_details'][0];

  evoChain.push({
    "species_name": evoData.species.name,
    "min_level": !evoDetails ? 1 : evoDetails.min_level,
    "trigger_name": !evoDetails ? null : evoDetails.trigger.name,
    "item": !evoDetails ? null : evoDetails.item
  });

  evoData = evoData['evolves_to'][0];
} while (!!evoData && evoData.hasOwnProperty('evolves_to'));

In your sample case above the resulting array should appear as follows:

[{
    "species_name": "charmander",
    "min_level": 1,
    "trigger_name": null,
    "item": null
}, {
    "species_name": "charmeleon",
    "min_level": 16,
    "trigger_name": "level-up",
    "item": null
}, {
    "species_name": "charizard",
    "min_level": 36,
    "trigger_name": "level-up",
    "item": null
}]

Answer 2

The approved answer above does not work if there are multiple evolutions such as Eevee or Snorunt. That will only return the first evolution e.g. Vaporeon

The following checks number of evolutions and runs through them all.

let evoChain = [];
let evoData = chain.chain;

do {
  let numberOfEvolutions = evoData['evolves_to'].length;  

  evoChain.push({
    "species_name": evoData .species.name,
    "min_level": !evoData ? 1 : evoData .min_level,
    "trigger_name": !evoData ? null : evoData .trigger.name,
    "item": !evoData ? null : evoData .item
  });

  if(numberOfEvolutions > 1) {
    for (let i = 1;i < numberOfEvolutions; i++) { 
      evoChain.push({
        "species_name": evoData.evolves_to[i].species.name,
        "min_level": !evoData.evolves_to[i]? 1 : evoData.evolves_to[i].min_level,
        "trigger_name": !evoData.evolves_to[i]? null : evoData.evolves_to[i].trigger.name,
        "item": !evoData.evolves_to[i]? null : evoData.evolves_to[i].item
     });
    }
  }        

  evoData = evoData['evolves_to'][0];

} while (!!evoData && evoData.hasOwnProperty('evolves_to'));

return evoChain;