【问题标题】:How to check if at least one item of an array is included in an array of an object and loop through all objects (JS)如何检查数组的至少一项是否包含在对象数组中并遍历所有对象(JS)
【发布时间】:2021-04-28 08:57:15
【问题描述】:

我搜索了这个并发现了类似的问题,但我无法为我的具体案例找到解决方案,所以如果这是重复的,我很抱歉。

我正在尝试为我的网站构建过滤器并遇到了这个问题。我有一个标记对象数组,每个标记对象都有一个标记数组(我将其命名为“类型”)。

当用户选择应显示的标记类型时,它们将添加到“selectedFilters”数组中,该数组包含所有选定的过滤器类型作为字符串。现在我想做的是,我只想显示标记数组,按所选类型过滤。这意味着如果标记对象在其类型数组中至少包含一种选定类型,则应该显示它。

const markers = [
{
type: ['Paper', 'Plastic']
},
{
type: ['Burnable', 'Plastic']
}
{
type: ['NotBurnable']
}
.
.
.
]

const selectedFilters = ['Burnable', 'Plastic']

const filteredMarkers = ????

我的想法是使用过滤器和一些方法来检查是否至少有一个过滤器与每个对象中的类型数组匹配,并仅返回通过的对象。我已经到了可以使用硬编码字符串作为过滤器而不是实际的arrat来做到这一点的地步:

const filteredMarkers = this.markers.filter(
          marker => marker.type.some( type => type == 'Plastic') 
        )

如何用实际数组替换硬编码字符串并循环遍历它?感谢任何建议、提示和建议。顺便说一句,这是一个 vue 项目。也许有不同的方式在 vue 中构建过滤器?

【问题讨论】:

    标签: javascript arrays loops vue.js sorting


    【解决方案1】:
    const markers = [
        {
            type: ['Paper', 'Plastic']
        },
        {
            type: ['Burnable', 'Plastic']
        },
        {
            type: ['NotBurnable']
        }
    ]
    
    const selectedFilters = ['Burnable', 'Plastic']
    
    const filteredMarkers = markers.filter(function(marker, index, arr) {
        return marker.type.some(type => selectedFilters.includes(type));
    });
    
    console.log(filteredMarkers);
    

    【讨论】:

      【解决方案2】:

      您的尝试非常接近。您只需要检查 selectedFilters .includes() 是否是其中一种标记类型。

      const markers = [
        {
          type: ['Paper', 'Plastic']
        },
        {
          type: ['Burnable', 'Plastic']
        },
        {
          type: ['NotBurnable']
        }
      ]
      
      const selectedFilters = ['Burnable', 'Plastic']
      
      const filteredMarkers = markers.filter(
        marker => marker.type.some(type => selectedFilters.includes(type))
      )
      
      console.log(filteredMarkers)

      【讨论】:

        猜你喜欢
        • 2018-03-21
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-06-07
        • 2019-06-05
        • 2019-07-26
        • 2021-08-12
        相关资源
        最近更新 更多