CODEWITHSUNDEEP
jsonapivue.jsnested
roxena
roxena

Reputation: 209

Access nested api data (vue)

I have problems to access nested data from my api call. The JSON response looks like this: enter image description here

I try to access the attribute_name in attributes. And the language_name in languages. I can display the location_name with the following code {{ userdetails.location.location_name }}

I have always problems with nested api data. Is there a guide how to access data from an api?

Thank you!

Update: My code looks like this

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();
  },
};

Upvotes: 0

Views: 63

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23500

attributes property is array so try (index is index in array):

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

and if you want to show them all:

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

Upvotes: 1

Related Questions