javascript - 如何按另一个数组中的项目过滤数组
问题描述
我们正在使用 vue 和 vuex 创建一个应用程序。对于用户正在关注的场所,我们有一系列场所 ID。我们希望每个用户都能看到他们关注的所有 TITLES 地点的列表。
例如:
venues: [
{venue:1, title: Shoreline}
{venue:2, title: Bill Graham}
{venue:3, title: Golden Gate}
{venue:4, title: Orphium}
]
我正在关注:[1, 3]
但我不想显示结果 1 和 3。我希望页面上的结果显示我正在关注“海岸线”和“金门”
我一直在尝试使用地图和过滤器功能,但无法使其正常工作。
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)
})
},
这为我提供了我正在关注的场所的所有 ID 的数组。这是 doc.data() 的样子:
email: "greg@..."
name: "Gre..."
phone: "925..."
user: "jxckuJwXxRdgfKmEduYlLbfxd1g1"
venue: "S2XWn8tG0tIMyoOyAcuc"
venueName: "California Memorial Stadium"
接下来,我想获取每个场地对象,其中 id 位于我关注的场地 id 数组中(有效负载)。
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)
})
},
这部分不起作用,因为“有效负载”不是字符串。我需要做些什么不同的事情?
解决方案
我认为你想要的是这样的:
getUserVenues({ commit }, payload) {
fb.venuesCollection.onSnapshot(querySnapshot => {
const venuesArray = [];
querySnapshot.forEach(doc => {
const venue = doc.data();
if (payload.includes(venue.venue)) {
venuesArray.push(venue);
}
});
commit('setUserVenues', venuesArray);
});
},
这些变量有点令人困惑,因为您的venue
对象有一个venue
字段,而不是一个id
(至少我是这样解释您的问题的)。因此,如果venue.venue
是您想要匹配的 id payload
,那么payload.includes
就是您所需要的。
如果您想提交除整个场地对象以外的其他内容,您可以执行以下操作:
只提交名字
commit('setUserVenues', venuesArray.map(v => v.venueName));
只提交名称和 ID
commit('setUserVenues', venuesArray.map(v => ({ id: v.venue, title: v.venueName})));
推荐阅读
- django - 如何在 django 中将静态添加到我的脚本中
- java - 为什么Java中的for循环是否存在不会有任何区别
- mysql - 如何在 Rails 应用程序中更改数据库
- javascript - 什么将在 NodeJS 中返回带有等待的 for 循环?
- python - 对数据集执行 k-means 聚类后分析聚类的技术
- docker - NuxtJS 开发服务器上客户端的连接错误问题
- android - 在 android 中使用 Room 时出错:错误 2067 (SQLITE_CONSTRAINT_UNIQUE)
- reactjs - React 如何更改具有关键属性的组件?
- php - 当我尝试使用 symfony 创建实体时出现 Aborted 错误消息
- angular - 角度材质 flex - 在 fxLayout 内滚动