[FIXED] How to load an additional JSON data from another API in VUE?

Issue

I'm setting up a PokeDex project using this Pokeapi using vue / axios. Currently I'm loading all the pokemon names in using this JSON file: https://pokeapi.co/api/v2/pokedex/1/

I want to load in additional pokemon data that is coming from another JSON file. for example: https://pokeapi.co/api/v2/pokemon/bulbasaur/

How can I load in this data dynamically in addition to my current setup?

current setup:

<template>

<div id="app">

    <div class="pokemon" v-for="pokemon in info">

        <span >{{ pokemon.entry_number }}</span>
        <span >{{ pokemon.pokemon_species.name }}</span>        

    </div>

</div>

</template>

<script>

export default {

name: '#app',

data () {
return {
    info: [],
    loading: true,
    errored: false,
}
},

methods: {

},

mounted () {

    axios.get('https://pokeapi.co/api/v2/pokedex/1/')

    .then(response => {
        this.info = response.data.pokemon_entries
    })

    .catch(error => {
        console.log(error)
        this.errored = true
    })

    .finally(() => this.loading = false)

}

};
</script>

Solution

I took my time to look into your APIs and implemented the code you wished.

I used a watcher to call the second APIs as soon as the info array is filled with data from the first API call (for details see: https://v2.vuejs.org/v2/guide/computed.html#Watchers). Furthermore, I separated the calls into different methods to improve the code:

 <template>
  <div id="app">
    <div class="pokemon" v-for="(pokemon, index) in info" :key="index">
      <span>{{ pokemon.entry_number }}</span>
      <span>{{ pokemon.pokemon_species.name }}</span>
      <span v-if="pokemon.details">-- details: base_experience{{ pokemon.details.base_experience }}</span>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "#app",

  data() {
    return {
      info: [],
      loading: true,
      errored: false
    };
  },
  watch: {
    info(newValue, oldValue) {
      if (oldValue.length === 0 && newValue.length > 0) {
        this.loadDetails();
      }
    }
  },
  methods: {
    getInitialData() {
      axios
        .get("https://pokeapi.co/api/v2/pokedex/1/")

        .then(response => {
          this.info = response.data.pokemon_entries;
        })

        .catch(error => {
          console.log(error);
          this.errored = true;
        })

        .finally(() => (this.loading = false));
    },

    loadDetails() {
      this.info.forEach((entry, index) => {
        const pokemonName = entry.pokemon_species.name;
        const secondApiUrl = `https://pokeapi.co/api/v2/pokemon/${pokemonName}/`;
        this.getDetailDataByPokemon(secondApiUrl, pokemonName);
      });
    },
    getDetailDataByPokemon(secondApiUrl, pokemonName) {
      axios.get(secondApiUrl).then(response => {
        this.mapDetailsToInfo(response, pokemonName);
      });
    },
    mapDetailsToInfo(response, pokemonName) {
      // here you can map the required infos to your initial info array.
      // as an example I mapped the base_experience
      const relevantDetail = response.data.base_experience;
      this.info = this.info.map(entry => {
        const mappedEntry = entry;
        if (entry.pokemon_species.name === pokemonName) {
          // here you can map any value
          mappedEntry.details = { base_experience: relevantDetail };
        }
        return mappedEntry;
      });
    }
  },

  mounted() {
    this.getInitialData();
  }
};
</script>

Answered By - Simon Thiel

Answer Checked By - Senaida (PHPFixing Volunteer)