如何在陣列內搜索過濾器陣列項

我的問題是我想找到我想搜索的每部標題電影的類別。例如

搜索輸入 = 動作

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"
        }

如您所見，這是searchinput，我唯一的問題是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}

uj5u.com熱心網友回復：

您可以使用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>

    )
})

uj5u.com熱心網友回復：

您需要遍歷您的串列并在該串列中添加包含該過濾器文本的任何類別。

您將使用兩種陣列方法，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)
}
})

最后，您的累加器陣列將具有已通過該條件的值....

對于我不建議初學者使用的非常高級的解決方案是使用陣列 reduce 函式來解決這種情況。

在此處閱讀有關某些方法的更多資訊

標籤：

上一篇：c中陣列索引的多個引數

下一篇：我在做什么錯我一直在非法啟動運算式publicstaticvoidintro(){javarepli