How to loop through an API endpoint JSON Object in Vue & Axios?

Question

I have an API endpoint which is a JSON object. I am using Axios and Vuejs to fetch the data into the DOM, but I am only able to get the whole object. When I tried to loop throught with the v-for directive it doesn't output the specific item in the object.

I fetched the data using Axios like so:

export default {
  name: 'Reviews',
  props: {
    title: String
  },
  data(){
    return {
      info: []
    }
  },
  // Life cycle hook that calls axios
  mounted(){
    axios.get('http://dev.muvtravel.com/index.php/explore/test?tripid=6590').then(response => {
      console.log(response.data)
      this.info = response.data
    })
  }
}

Then tried loop through using v-for

<div v-for="(item, index) in info" :key="index">
   {{ item.establishment_address }}
   {{ item.phone }}
</div>

<template>
  <div class="reviews container-fluid">
    <h1 class="text-center">{{ title }}</h1>
    <b-container>
      <b-row>
        <b-col cols="12" sm="12" md="12" lg="4" xl="4">
          Column 1
        </b-col>

        <b-col cols="12" sm="12" md="12" lg="8" xl="8">
          Column 2
        </b-col>
      </b-row>
    </b-container>

    <div v-for="(item, index) in info" :key="index">
      {{ item.establishment_address }}
      {{ item.phone }}
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Reviews',
  props: {
    title: String
  },
  data(){
    return {
      info: []
    }
  },
  // Life cycle hook that calls axios
  mounted(){
    axios.get('http://dev.muvtravel.com/index.php/explore/test?tripid=6590').then(response => {
      console.log(response.data)
      this.info = response.data
    })
  }
}
</script>

<style scoped lang="scss">

</style>

Any help will be appreciate it

AFAICT this looks like this should work. do you get the array when you console.log(response.data)? — Daniel
– Daniel, Commented Jun 27, 2019 at 17:56
Your code should work. Here s an example using static data and different layout jsfiddle.net/8jkxyhs6 and it's working — Daniel
– Daniel, Commented Jun 27, 2019 at 18:03
jsfiddle won't allow due to CORS. but you can add a console log to compare with your result. Can you provide the example of your result from {{ item }}? I"m wondering if it get's parsed as text maybe ¯\_(ツ)_/¯ — Daniel
– Daniel, Commented Jun 27, 2019 at 18:13
can you try {{ Object.keys(item).join(' | ') }} instead of {{ item }} and see if the keys you're looking for are there (establishment_address, phone)? — Daniel
– Daniel, Commented Jun 27, 2019 at 18:22
@Daniel ok, I got it! I had to add response.data.data instead of response.data. Thanks for all your help! — Manuel Abascal
– Manuel Abascal, Commented Jun 27, 2019 at 18:27

cloake · Accepted Answer · 2019-06-27 19:11:22Z

So I checked to see if the API endpoint in your code was publicly open - it is.

From looking at your payload, the reason your code isn't working is because you're trying to iterate on an object. The data object that you're returning is the FULL payload from that API endpoint, which is an object {"success": true, "data": [...]"}.

To more clearly illustrate what I'm talking about, here's an example fetch you can run:

fetch(yourAPIEndpoint).then(res => res.json()).then(data => console.log(data));

When I run that, it prints this to the console:

{success: true, data: Array(15)}

When I edit the console.log above to output data.data like so:

fetch(yourAPIEndpoint).then(res => res.json()).then(data => console.log(data.data));

I get the array of locations that you are trying to set.

TL;DR: You need to set this.info = response.data.data.

Happy coding!

Collectives™ on Stack Overflow

How to loop through an API endpoint JSON Object in Vue & Axios?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related