从数组内部过滤值

时间:2019-08-22 17:57:14

标签: javascript arrays reactjs

我有一个解决方案,可以过滤项目标签。已更新,因此书籍可以接收多个标签并添加了标签数组:

const bookListBefore = [
  { id: 1, tag: 'Fysik' },
  { id: 2, tag: 'Marketing' },
  { id: 3, tag: '' },
  ];

 const bookListNow = [
 { id: 1, tag: ['Fysik', 'Matematik'] },
 { id: 2, tag: ['Analytics', 'Marketing', 'Data'] },
 { id: 3, tag: [''] },
 ];

现在,我正在努力寻找一种解决方案来过滤那些具有特定标签的项目。在使用单个标签之前,我可以使用此解决方案执行过滤器并显示带有特定标签的项目:

const filteredList = bookList
    .filter(item => (item.title.toLowerCase().includes(searchTextHome)
      || item.author.toLowerCase().includes(searchTextHome))
      && (selectedTags.length > 0 ? selectedTags.includes(item.tag) : true));

 <section className={stylesSCSS.bookContainer}>
        {filteredList.length === 0 ? emptyPlaceholder()
          : filteredList.map(item => (
            <BookItem
              cover={item.cover}
              item={item}
              userTagData={userTagData}
              onTagSelected={onTagSelected}
            />
          ))
        }
  </section>

“搜索”过滤bookList的第一部分是关于输入搜索字段的,但是第二部分(selectedTags.length > 0 ? selectedTags.includes(item.tag) : true)是我无法过滤标签数组的地方,并且不知道如何使用标签扩展运算符或数组函数以过滤标签数组。有什么想法吗?

2 个答案:

答案 0 :(得分:1)

您正在将数组传递给includesincludes接受两个参数,第一个是要检查的值,第二个是数组中的位置(可选)

[1,2,3].includes(1) //true
[1,2,3].includes(1,3) //false

您需要一次检查tag中的每个元素

const { tag } = book

for(let item of tag){
    if(list.includes(item)) return true
}
return false

您的代码应如下所示

const filteredList = bookList.filter(item => 
    (item.title.toLowerCase().includes(searchTextHome)
    || item.author.toLowerCase().includes(searchTextHome))

const result = selectedTags.length > 0 ? filteredList.filter(x =>{
    const { tag } = x

    for(let item of tag) {
        if(selectedTags.includes(item)) return true
    }
    return false
}) : filteredList

答案 1 :(得分:1)

我认为它将与数组函数some

一起使用
selectedTags.length > 0 ? selectedTags.some(st => item.tag.includes(st)) : true

使用此标记,至少一个选定的标签应与书本标签列表匹配,并显示出来。