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

Question

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

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

//我的 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;
        }, []);

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

谢谢，吉格内什·拉瓦尔

Answer 1

您可以使用内部的 filter 方法来检查 some 标记是否包含您要搜索的字符串的一部分。

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)