Как пройти через объект JSON конечной точки API в Vue & Axios?

Question

У меня есть конечная точка API, которая является объектом JSON. Я использую Axios и Vuejs для извлечения данных в DOM, но я могу получить только весь объект. Когда я пытался выполнить цикл с помощью директивы v-for, он не выводил конкретный элемент в объекте.

Я получил данные, используя 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
    })
  }
}

Затем попытался перебрать, используя 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>

Любая помощь будет признательна

Answer 1

Итак, я проверил, была ли конечная точка API в вашем коде публично открытой - так и есть.

Из-за того, что ваш код не работает, причина в том, что ваш код не работает, в том, что вы пытаетесь выполнить итерации на объекте.Возвращаемый объект data - это ПОЛНАЯ полезная нагрузка от этой конечной точки API, которая является объектом {"success": true, "data": [...]"}.

. Чтобы более ясно проиллюстрировать то, о чем я говорю, вот пример fetchвы можете запустить:

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

Когда я запускаю это, он выводит это на консоль:

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

Когда я редактирую console.log выше, чтобы вывести data.data, вот так:

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

Я получаю массив местоположений, которые вы пытаетесь установить.

TL; DR: Вам необходимо установить this.info = response.data.data.

Удачного кодирования!