Javascript 通过包含搜索词的标签子数组过滤或减少每个 JSON 对象

Question

我需要关于通过其子子数组属性在给定的 Javascript 对象数组下过滤的帮助。

我有一个反应应用程序，当用户在搜索框中键入字符串时，我想在其中过滤文章，但我的问题与仅过滤对象有关，它的子数组值。

// 我的 JSON 对象

this.state = {
 articles: [
    {title: 'title 1', tags :["JavaScript", "ES6"], category: "JavaScript"},
    {title: 'title 2', tags :["React", "TypeScript"], category: "React"},
    {title: 'title 3', tags :["JavaScript", "Inheritance", "Prototype"], category: "JavaScript"}
 ]
};

// 需要输出

// If user start typing in searchbox like "jav" then it should filter only those items which tags name matching with "jav". Tags is an Array

 [
    {title: 'title 1', tags :["JavaScript", "ES6"], category: "JavaScript"},
    {title: 'title 3', tags :["JavaScript", "Inheritance", "Prototype"], category: "JavaScript"}
 ]

我试过下面给出的代码，但没有给出正确的结果：

this.state.articles.reduce((newArticles: any, article: any) => {
            // let test1 = [];
            if (article.tags) {
                article.tags.map(tag => {
                    if (tag && tag.toLowerCase().indexOf(event.target.value) === -1) {
                        newArticles.push(article);
                        // return article;
                    }
                });
            } else {
                // newArticles.push(article);
            }

            console.log('test1 =', newArticles);
            return newArticles;
        }, []);

如果我的问题不清楚或需要更多信息，请告诉我。

谢谢， Jignesh Raval

Answer 1

您可以使用filter内部检查是否some标记includes要搜索的字符串部分的方法来执行此操作。

let articles = [{title: 'title 1', tags :["JavaScript", "ES6"], category: "JavaScript"},{title: 'title 2', tags :["React", "TypeScript"], category: "React"},{title: 'title 3', tags :["JavaScript", "Inheritance", "Prototype"], category: "JavaScript"}]
 
let search = 'java';
let result = articles.filter(({tags}) => {
  return tags.some(e => e.toLowerCase().includes(search.toLowerCase()))
})

console.log(result)