时间戳

首页 > 解决方案 > 如何访问每个 JSON 对象的属性？

javascript - 如何访问每个 JSON 对象的属性？

问题描述

所以我正在使用 Axios 进行 API 调用，并将 JSON 响应推送到一个空数组。我在访问每个对象的各个属性时遇到问题。`

        <div class="wrapper">
            <div class="row">
                <div v-for="group in groups" :key="group.id">
                    <div class="col-md-4 cards">
                        <h3>{{ group[1].name }}</h3>
                        <h3>{{ group.name }}</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>

然后我的js是

import axios from 'axios'
export default {
    name: 'app',
        data () {
            return {
                groups: [],
                loading: false
            }
        },
        methods: {
            getHomes: function() {
                this.loading = true;
                axios.get("*******")
                    .then((response) =>{
                        this.loading = false;
                        this.groups.push(response.data);
                        // console.log(this.groups)
                    }, (error) => {
                        this.loading = false;
                    })

            },

我可以通过对数组索引进行硬编码来访问每个单独的 group.name，但是我在动态访问它们时遇到了问题。

这是响应的图片 在此处输入图像描述

标签： javascriptajaxapivue.js

解决方案

而不是这样做：

.then((response) =>{
  this.loading = false;
  this.groups.push(response.data);
}, (error) => {
  this.loading = false;
})

只需将 response.data 分配给 groups 变量。

.then((response) =>{
  this.loading = false;
  this.groups = response.data;
}, (error) => {
  this.loading = false;
})

在您的模板中：

<div v-for="(group, index) in groups" :key="index">
  <div class="col-md-4 cards">
    <h3>{{ group.name }}</h3>
    <h4>{{ group.url }}</h4>
  </div>
</div>

您无法访问该项目的原因是因为您将对象数组推送到数组中，因此您需要在另一个数组中遍历该数组。

推荐阅读