Filtering values from inside array

Question

I had a solution where the filtering of item tags worked. Updated so the books could receive multiple tags and added the tag array:

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: [''] },
 ];

Now I am struggling on finding a solution to filter those items that have a specific tag. Before with the single tags I could perform a filter and could display items with specific tags with this solution:

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>

The first part of the "search" filtering the bookList is about an input search field but this second part (selectedTags.length > 0 ? selectedTags.includes(item.tag) : true) Is where I am not able to filter the tag array, and have no ideas on how to use maybe spread operator or array functions to filter the tag arrays. Any ideas?

can you show how selectedTags looks like ? is it an array or string ? — Code Maniac
– Code Maniac, Commented Aug 22, 2019 at 18:01

Auskennfuchs · Accepted Answer · 2019-08-22 18:03:58Z

1

I think it will work with the array function some

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

With this at least one selected tag should match the list of book tags and it will be displayed.

answered Aug 22, 2019 at 18:03

Auskennfuchs

1,74712 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dupocas · Accepted Answer · 2019-08-22 18:09:37Z

You are passing an array to includes. includes takes two arguments the first one is a value to check and the second is the position in the array (optional)

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

You need to check each element from tag at a time

const { tag } = book

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

Your code should look like this

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

Thank you for showing how it works. Some interesting things in your solution @Dupocas

Collectives™ on Stack Overflow

Filtering values from inside array

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related