CODEWITHSUNDEEP
jsonapivue.jsaxios
Newland
Newland

Reputation: 55

How to display JSON data from API with VUE

How can I display the names of the pokemon that I get from this Pokeapi: https://pokeapi.co/

<template>

<div id="app">
    <div v-for="name in info">
        <span >{{ name }}</span>
    </div>  
</div>

</template> 

<script>
    export default {
    el: '#app',

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

    mounted () {
        axios

        .get('https://pokeapi.co/api/v2/pokemon/')

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

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

        .finally(() => this.loading = false)
    }
};
</script>

I expect to be able to display for example the name bulbasaur and the url that is givin within the API.

Currently this is displaying:

{ "name": "bulbasaur", "url": "https://pokeapi.co/api/v2/pokemon/1/" }
{ "name": "ivysaur", "url": "https://pokeapi.co/api/v2/pokemon/2/" }
{ "name": "venusaur", "url": "https://pokeapi.co/api/v2/pokemon/3/" }
{ "name": "charmander", "url": "https://pokeapi.co/api/v2/pokemon/4/" }

Upvotes: 2

Views: 1953

Answers (1)

Ducille
Ducille

Reputation: 56

The "name" in your for loop is referencing the object itself since info is an array of objects. Use dot notation to access the value you want to display. for example 

<div id="app">
    <div v-for="pokemon in info">
        <span >{{ pokemon.name }}</span>
        <span >{{ pokemon.url }}</span>
    </div>  
</div>

Upvotes: 2

Related Questions