How to show nested data within Vuetify data table item prop? - firebase

Question

We have an app with Users and Events. Users Apply to work Events. I want to create a vuetify data table that shows a User the shows that they have applied to, as well as their application status for each show.
Our firebase data is nested as: events - event.uid - applications - application.id(which matches the user.uid) - status
Our table code:
<v-data-table
v-bind:headers="headers"
:items="filteredEvents"
:rows-per-page-items="[10,25, { text: 'All', value: - 1}]"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.title }}</td>
<td>{{ props.item.city }}</td>
<td>{{ props.item.startDate | moment("dddd, MMMM Do YYYY") }}</td>
<td>{{ props.item.applicants.match(user.id).status }}</td>
</template>
</v-data-table>
The applicants status td is where we would want "Pending" or "Accepted" to show up. The code that's there doesn't work. I wish it worked like that but it doesn't.
Computed:
filteredEvents(){
return this.$store.getters.loadedEvents.filter((event) => {
return this.$store.getters.isUserApplied(event.id);
})
}
Vuex:
getInitialEventsState({ commit }) {
let db = firebase.database();
db.ref("/events").on("value", function (snapshot) {
let data = []
for (var key in snapshot.val()) {
let event = snapshot.val()[key];
event.id = key
data.push(event)
}
commit("setLoadedEvents", data)
commit("setEventsMap", snapshot.val());
})
}
isUserApplied: (state) => (id) => {
let user = store.getters.user
if (user && state.eventsMap[id] && state.eventsMap[id].applicants) {
let status = state.eventsMap[id].applicants[user.id]
if(status && status.status) {
return status.status;
} else {
return null;
}
}
return false
}
loadedEvents(state) {
return state.loadedEvents
}
As a user who has Applied for 2 Events, I can see those two events in the data table. The name, city, and startDate all show, but my status does not.
What is the best way to solve this problem?
Thanks!

Answer 1

This may or may not help you as I can not see your events object structure. But you say the data is nested. It would be helpful to see what is arrays versus what is objects. So if you can show it in code form that would help. So other users here may want to see some kind of answer...
When I use firestore data it is usually in the form of an array of objects with each object having/holding other arrays. Getting to that inner nested data can be challenging. So I pass in my array of documents as items to the data-table and then use this this little bit of code in the td tags:
<td class="text-xs-left">
{{ getNestedObject(props.item, ['someArray', index, 'someProp']) }}
</td>
methods: {
getNestedObject(nestedObj, pathArr) {
return pathArr.reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), nestedObj)
},
}
Here was my source of inspiration: Accessing Nested Objects in JavaScript