访问嵌套的 api 数据 (vue)

Question

我在 api 调用中访问嵌套数据时遇到问题。 JSON 响应如下所示：

我尝试访问属性中的 attribute_name。以及语言中的 language_name。我可以使用以下代码显示 location_name {{ userdetails.location.location_name }}

我总是遇到嵌套 api 数据的问题。是否有如何从 api 访问数据的指南？

谢谢！

更新：我的代码如下所示

data() {
    return {
      userdetails: undefined,
    };
  },

  methods: {
    getUserData() {
      DataService.getUserById()
        .then((response) => {
          this.userdetails = response.data;
          console.log(response);
        })
        .catch((error) => {
          console.log(
            "Ein Fehler beim User ist aufgetreten: " + error.response
          );
        });
    },
  },
  created() {
    this.getUserData();
  },
};

Answer 1

attributes 属性是数组所以尝试（index 是数组中的索引）：

{{ userdetails.attributes[index].attribute_name }}

如果您想全部显示：

<div v-for="(attr, i) in userdetails.attributes" :key="i" >
  {{ attr.attribute_name }}
</div>

访问嵌套的 api 数据 (vue)

Access nested api data (vue)

api

json

nested

vue.js