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

Posted 2023-02-22

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

【英文标题】：Javascript Filter or Reduce each JSON object by child array of tags which contains search word

【发布时间】：2019-03-17 16:10:21

【问题描述】：

我需要有关通过子数组属性在给定的 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;
        , []);

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

谢谢， 吉涅什·拉瓦尔

【参考方案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)

【参考方案2】：

您可以在内部使用filter 方法执行此操作，检查某个标签是否包含您要搜索的部分字符串。

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 = "ES";
let result = articles.filter(((data)=>data.tags.some(v => v.includes(search))))

console.log(result)

【参考方案3】：

我认为这是解决方案。您有不必要的元素的事实是，您只检查了属性children 是否有值而不是undefined。使用检查 node.children.length > 0 检查数组是否至少有 1 个项目。

    // the filter

const nodes = $.grep(data, function f(node) 
    const nodeIncludesValue = node.name.toLowerCase().includes(value);

    if (node.children && node.children.length > 0) 
        return $.grep(node.children, f) || nodeIncludesValue;
       

    return nodeIncludesValue;
);



// No unnecessary elements

createTree(nodes, container)

    const list = document.createElement('ul');

    nodes.forEach((node) => 
        const listItem = document.createElement('li');
        listItem.textContent = node.name;
        list.appendChild(listItem);

        if (node.children && node.children.length > 0) 
            const childList = document.createElement('li');
            this.createTree(node.children, childList);
            list.appendChild(childList);
        
    );

    container.appendChild(list);

希望这对你有帮助:)