How to display JSON data from API with VUE

Question

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/" }

Ducille · Accepted Answer · 2019-10-12 19:16:05Z

2

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>

edited Oct 12, 2019 at 19:16

answered Oct 12, 2019 at 19:08

Ducille

664 bronze badges

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

2 Comments

user4285359 Over a year ago

I how would I take the url, and then use it to make another call to the api to get information specifically about that pokemon?

Ducille Over a year ago

Well, that would depend entirely upon how/when you wish you make the api call. Are you clicking a load info button? Or is the api going to be called as soon as an element is rendered? If the api call is event based, you can create a method that takes the url as an argument and fetches the data then attach the method to an event listener. If you want the information straight away, I would suggest creating a separate Pokemon component that accepts the url as a prop and makes a call to the api in the mounted() lifecycle hook using the url prop. There are many ways to solve that problem.

Collectives™ on Stack Overflow

How to display JSON data from API with VUE

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related