Skip to content
Advertisement

VueJS 3 / Vuex – How to display data from a nested json result

Dears,

I’ve been struggling with this for hours, even following basics tutorials.

I’m trying to display some data in Json in my Vue 3 project, when a data is in an array, using a loop I get everything I need, but if it isn’t in an array, I get an error or the data are stick together.

I’ve created a vuex store like this :

JavaScript

When I call this data in my page I get this result :

JavaScript

The result seems good to me. Now in my Vue, I would like to display the data, this is where I get in trouble regarding the “DELEGUE” data.

JavaScript

I get this error : Uncaught (in promise) TypeError: Cannot read properties of null (reading 'lastname')

So I understand that for USERS I can do a v-for loop, but in the case of DELEGUE, I can’t access right away, or if I do a loop, I’ve got all the data not separated and I can’t work with it.

Do you guys have any idea?

Thank you very much for your help.

Logan

Advertisement

Answer

If I understood you correctly, please take a look at following snippet:

JavaScript
JavaScript
Advertisement