如何在 Vue 和 Axios 中循环访问 API 端点 JSON 对象？

Posted 2023-02-22

【中文标题】如何在 Vue 和 Axios 中循环访问 API 端点 JSON 对象？

【英文标题】：How to loop through an API endpoint JSON Object in Vue & Axios?

【发布时间】：2019-11-09 18:55:27

【问题描述】：

我有一个 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>

任何帮助将不胜感激

【问题讨论】：

AFAICT 这看起来应该可以工作。当你console.log(response.data)时你得到数组了吗？

您的代码应该可以工作。这是一个使用静态数据和不同布局的示例jsfiddle.net/8jkxyhs6，它正在工作

jsfiddle 由于 CORS 而不允许。但您可以添加控制台日志以与您的结果进行比较。您能否提供来自 item 的结果示例？我想知道它是否被解析为文本可能¯\_(ツ)_/¯

你能试试 Object.keys(item).join(' | ') 而不是 item ，看看你要找的钥匙是否在那里（企业地址、电话）？

@Daniel 好的，我明白了！我不得不添加 response.data.data 而不是 response.data。感谢您的所有帮助！

【参考方案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。

编码愉快！