按标签过滤对象(对象数组内的数组)

use*_*245 1 javascript arrays object filter

目标

编辑 - 让问题更清楚

创建可根据项目标签缩小搜索结果范围并仅返回具有指定标签的项目的搜索。示例:['green'] 会给我所有绿色的项目,包括大、中和小(因为没有指定尺寸),['green','big'] 只会给我绿色和大的项目。

我遇到了一个场景。为了简化事情,我有以下数据

items: [
    { title: 'prod1', tags: [{ value: 'green' }, { value: 'big' }] },
    { title: 'prod2', tags: [{ value: 'blue' }, { value: 'small' }] },
    { title: 'prod3', tags: [{ value: 'yellow' }, { value: 'medium' }, { value: 'big' }] },
    { title: 'prod4', tags: [{ value: 'green' }, { value: 'big' }, { value: 'medium' }] },
]
Run Code Online (Sandbox Code Playgroud)

我的搜索字段是一个多重选择输入,采用预定义标签(如本网站中的标签字段),该字段的值作为数组输出。如果我选择green输出为 ['green'] 如果我选择green并且big输出为 ['green', 'big']

如果我选择标签green我应该得到这些结果

{ title: 'prod1', tags: [{ value: 'green' }, { value: 'big' }] },
{ title: 'prod4', tags: [{ value: 'green' }, { value: 'big' }, { value: 'medium' }] },
Run Code Online (Sandbox Code Playgroud)

如果我选择标签greenmedium得到这些结果,因为 prod4 是唯一具有绿色和中标签的产品

{ title: 'prod4', tags: [{ value: 'green' }, { value: 'big' }, { value: 'medium' }] },
Run Code Online (Sandbox Code Playgroud)

如果我选择green并且big我应该得到

{ title: 'prod4', tags: [{ value: 'green' }, { value: 'big' }, { value: 'medium' }] },
{ title: 'prod1', tags: [{ value: 'green' }, { value: 'big' }] }
Run Code Online (Sandbox Code Playgroud)

如果没有选择任何内容,则输出所有项目


原问题

I ran into a scenario. To simplify things, i have the following data

items: [
  {title: 'one', desc: 'this is one', tags: [{value: 'mytag'},{value: 'one'}]},
  {title: 'two', desc: 'this is two', tags: [{value: 'mytag'},{value: two}]},
  {title: 'three', desc: 'this is three', tags: [{value: 'mytag'},{value: 'three'},{value: 'common'}]},
  {title: 'four', desc: 'this is four', tags: [{value: 'mytag'},{value: 'four'},{value: 'common'}]},
]
Run Code Online (Sandbox Code Playgroud)

我有一个接受标签的搜索输入元素,输入的值是一个数组。输入的值为['tag','two'] 我似乎无法弄清楚如何通过标签过滤我的项目。

如果我按标签二 ( ['two']) 搜索,我应该得到返回

filteredItems: [
   {title: 'two', desc: 'this is two', tags: [{value: 'mytag'},{value: two}]},
]
Run Code Online (Sandbox Code Playgroud)

如果我用两个常见的 ( ['two','common']) 进行搜索,我应该得到一个返回

filteredItems: [
  {title: 'three', desc: 'this is three', tags: [{value: 'mytag'},{value: 'three'},{value: 'common'}]},
  {title: 'four', desc: 'this is four', tags: [{value: 'mytag'},{value: 'four'},{value: 'common'}]},
]
Run Code Online (Sandbox Code Playgroud)

我尝试查看一些示例,发现一些示例仅过滤顶级项目而不是嵌套数组。

谢谢:) 顺便说一句,使用 javascript,可以使用 lodash。

我的游乐场 JS 文件:

const _ = require('lodash')

let items = [
    {
        name: 'hello',
        tags: [
            { value: 1 },
            { value: 2 },
        ]
    },
    {
        name: 'bye',
        tags: [
            { value: 2 },
            { value: 4 },
        ]
    }
]
items.map(item =>{

    let test = _.includes(item.tags, 2)
    console.log(test)
// returns false, false
})
Run Code Online (Sandbox Code Playgroud)

tri*_*cot 5

(注意:这个答案的第一部分与编辑之前的原始问题有关)

你需要更深入一层。您的最终Playground代码是将对象与 2 进行比较,但您应该将对象属性与 2 进行比较。

let test = items.filter(item =>{
    return item.tags.some(obj => obj.value === 2)
})
Run Code Online (Sandbox Code Playgroud)

或者,如果要查找的值位于其他属性中:

let test = items.filter(item =>{
    return item.tags.some(obj => obj.text === 'two')
})
Run Code Online (Sandbox Code Playgroud)

编辑您的问题后

您的示例数据可以这样搜索:

let test = items.filter(item =>{
    return item.tags.some(obj => obj.value === 2)
})
Run Code Online (Sandbox Code Playgroud)

您需要的逻辑是 AND 和 OR 逻辑的组合:对于匹配给定约束的数组元素,对于给定约束中的每个值 (AND),它应该有一些匹配对象 (OR) 。