// 我的 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

3个回答

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

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)

我认为这是解决方案。你有不必要的元素的事实是，你只检查了属性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);
}

希望这对你有帮助:)

其它你可能感兴趣的问题

上一篇如何在 Jest 中将数据作为上下文传递？下一篇在 React 中过滤状态而不删除数据