如何在数组中搜索筛选数组项

Question

我的问题是，我想找到每一个标题电影的类别，我想搜索。例如

searchInput =行动 outputShown =变压器，恐龙，哥斯拉

因为我有如下所列的类别：

    const category = ['Comedy','Classic','Drama','Romance','Science- 
     Fiction','Adult','Sex','Kids','Animation','Cartoon','Action','Storyline','Tragic']

我希望这个TitleItems能够与我的搜索软件相匹配，即使它们有不同的类别。

    const TitleItems =  {
            imgPath:'', name:'The Office',type:['Comedy','Classic','Romance'],views:"5666",rate:"4.1"
        },
        {
            imgPath:'', name:'Ready Player One',type:['Science-Fiction','Romance','Drama'],views:"7776",rate:"4.2"
        },
        {
            imgPath:'', name:'Interstellar',type:['Science-Fiction','Drama','Romance','Tragic'],views:"10505",rate:"4.5"
        },
        {
            imgPath:'', name:'Transformer',type:['Science-Fiction','Action','Classic','Comedy'],views:"20015",rate:"4.3"
        },
        {
            imgPath:'', name:'Jack N The Giant',type:['Science-Fiction','Action','Adult','Comedy'],views:"12234",rate:"4.2"
        }

正如您所看到的，这里唯一的问题是item.type，因为它有一个数组--我不能作为item.type.toLowerCase().includes(search.toLowerCase())来执行它，但是我可以作为item.type[0].toLowerCase().includes(search.toLowerCase())来完成它，因为它不能包含一个数组，但是我真正想要做的是在标题的每个项目类型的数组中搜索。所以我想知道那是怎么回事？有人知道吗？我不知道我问得对不对。如果这是个糟糕的问题，请帮我编辑一下。

    const [search,setsearch] = useState("");

    const ListItems = items.filter((item,index) => {
        return (
            item.name.toLowerCase().includes(search.toLowerCase()) ||
            item.views.toLowerCase().includes(search.toLowerCase()) ||
            item.rate.toLowerCase().includes(search.toLowerCase()) || 
            item.type.toLowerCase().includes(search.toLowerCase())
        )   
    }).map((item,index) => {
        return(
            <div>
                <h1 key={index}> 
                    {item.name}, {item.type} {item.views} {item.rate} 
                </h1>

            </div>

        )
    })

这是显示输出的主体

    <input type="text" name='search' placeholder='Search...' value={search} onChange={e => setsearch(e.target.value)} />
     {ListItems}

Answer 1

您可以使用Array.prototype.some扩展该条件( some()方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试)。

item.type.some(category => category.toLowerCase().includes(search.toLowerCase()))

在筛选条件下，按以下方式更新

const [search,setsearch] = useState("");

const ListItems = items.filter((item,index) => {
    return (
        item.name.toLowerCase().includes(search.toLowerCase()) ||
        item.views.toLowerCase().includes(search.toLowerCase()) ||
        item.rate.toLowerCase().includes(search.toLowerCase()) || 
        item.type.some(category => category.toLowerCase().includes(search.toLowerCase()))
    )   
}).map((item,index) => {
    return(
        <div>
            <h1 key={index}> 
                {item.name}, {item.type} {item.views} {item.rate} 
            </h1>

        </div>

    )
})

Answer 2

您需要循环遍历列表，并在该列表中添加包含该筛选器文本的任何类别。

您将使用两个数组方法，forEach和some。

对你的问题的简单解释：

// example from your scenario
const TitleItems: { id: number, list: string[] }[] = [
    {
        id: 12,
        list: ['1', '2', '3', '4', '5', '6', '7', '8']
    }
]

// the accumulator function that shall be taking in the values that have passed our given test
let accumulator: any[] = []

// first loop through all the items by forEach
TitleItems.forEach((item) => {

// then use a comparison using some, some will return true when any element in it matches the query you put
// the query should be your search string
if (item.list.some(item => item === '12')) {
    accumulator.push(item)
}
})

最后，累加器数组将具有传递该条件的值.

对于一个我不推荐给初学者的非常高级的解决方案，就是使用数组减少函数来解决这种情况。

阅读更多关于某些方法这里的信息