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 :
const region = { state: { region: {} }, mutations: { SET_REGION(state, region) { state.region = region } }, actions: { getAllRegions({ commit }) { axios.get("/api/regions/get") .then(response => { commit('SET_REGION', response.data) }) } }, getters: { getAllRegions (state) { return state.region }, getDelegue (state) { return state.region.delegue } } };
When I call this data in my page I get this result :
[ { id: 3, name: "Occitanie", agents: [ ], delegue: null }, { id: 2, name: "Ile de France", agents: [ ], delegue: null }, { id: 4, name: "Hauts de France", agents: [ ], delegue: null }, { id: 1, name: "Grand Est", agents: [ { lastname: "DOE", firstname: "John", phone: "+331234567890", user: { email: "b@b.b" } } ], delegue: { lastname: "DURSLEY", firstname: "Jake", phone: "+3309987654321", user: { email: "a@a.a" } } } ]
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.
<div v-for="region in myFunctionToRetrieveJsonData"> <p>Name: {{ region.name }}</p> // WORKING <p v-for="agent in region.agents"> {{ agent.lastname + ' ' + agent.firstname }}<br> // WORKING {{ agent.phone }}<br> // WORKING <span v-for="email in agent.user">{{ email }}</span> // WORKING // THIS WAY Delegue: {{ agent.delegue.lastname + ' ' + agent.delegue.firstname }} // NOT WORKING // ALSO THIS WAY Delegue: {{ agent.delegue[0].lastname + ' ' + agent.delegue[0].firstname }} // NOT WORKING // THE OTHER WAY <p v-for="delegue in region.delegue"> Delegue: {{ delegue }} // DISPLAY: DURSLEYJake+3309987654321{"email":"a@a.a"} NOT GOOD </p> </p> </div>
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:
new Vue({ el: '#demo', data() { return { items: [ {id: 3, name: "Occitanie", agents: [ ], delegue: null}, {id: 2, name: "Ile de France", agents: [ ], delegue: null}, {id: 4, name: "Hauts de France", agents: [ ], delegue: null}, {id: 1, name: "Grand Est", agents: [{lastname: "DOE", firstname: "John", phone: "+331234567890", user: {email: "b@b.b"}}], delegue: {lastname: "DURSLEY", firstname: "Jake", phone: "+3309987654321", user: {email: "a@a.a"}}} ] } } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div v-for="region in items"> <p>Name: {{ region.name }}</p> <p v-for="agent in region.agents"> {{ agent.lastname + ' ' + agent.firstname }}<br> {{ agent.phone }}<br> <span v-for="email in agent.user">{{ email }}</span> Delegue: {{region.delegue?.lastname + ' ' + region.delegue?.firstname }} </p> </div> </div>