We are currently in the process of developing an application using Vue and Vuex. Our goal is to display a list of titles for venues that a user is following, based on an array of venue IDs.
For instance:
venues: [
{venue:1, title: Shoreline}
{venue:2, title: Bill Graham}
{venue:3, title: Golden Gate}
{venue:4, title: Orphium}
]
My current list of followed venues includes: [1, 3]
However, I don't want to simply show the IDs 1 and 3. Instead, I want to display "Shoreline" and "Golden Gate" as the followed venues.
I have been attempting to utilize map and filter functions without success.
getFollowingState({ commit, state }) {
fb.venueFollowersCollection.where("user", "==", state.currentUser.uid).onSnapshot(querySnapshot => {
let followingArray = []
querySnapshot.forEach(doc => {
console.log(doc.data())
let followed = doc.data().venue
followingArray.push(followed)
})
store.dispatch('getUserVenues', followingArray)
commit('setFollowedVenues', followingArray)
})
},
The above code fetches an array of venue IDs that I am following. Here is an example snapshot of doc.data():
email: "greg@..."
name: "Gre..."
phone: "925..."
user: "jxckuJwXxRdgfKmEduYlLbfxd1g1"
venue: "S2XWn8tG0tIMyoOyAcuc"
venueName: "California Memorial Stadium"
Next, my objective is to retrieve each venue object where the ID matches one of the IDs of venues I am following (payload).
getUserVenues({ commit }, payload) {
fb.venuesCollection.onSnapshot(querySnapshot => {
let venuesArray = []
querySnapshot.forEach(doc => {
if ((doc.data()).includes(payload)) {
let venue = doc.data()
venuesArray.push(venue)
console.log(doc.data())
}
})
console.log(venuesArray)
commit("setUserVenues", venuesArray)
})
},
A challenge arises here because "payload" is not recognized as a string. What adjustments should be made in order to achieve the desired outcome?