Access nested api data (vue)

Question

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

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

The response is saved in any variable? I supose you save the res.data in userdetails? Can you show us the code? — MuXeD
– MuXeD, Commented Dec 2, 2021 at 8:13

Nikola Pavicevic · Accepted Answer · 2021-12-02 08:57:03Z

1

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>

answered Dec 2, 2021 at 8:57

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

roxena Over a year ago

Thank you! I had to add another "attribute" but it works now perfectly. <div v-for="(attr, i) in userdetails.attributes" :key="i"> {{ attr.attribute.attribute_name }} </div>

Nikola Pavicevic Over a year ago

nice, cheers :)

Collectives™ on Stack Overflow

Access nested api data (vue)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related