Javascript按包含搜索詞的標簽子數組過濾或減少每個JSON對象

Question

我需要有關子對象array屬性的給定Javascript Array下面的過濾的幫助。

我有一個反應應用程序，當用戶在搜索框中鍵入字符串時，我想在其中過濾文章，但是我的問題與僅通過對象的子數組值過濾對象有關。

//我的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標記是否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) 

Answer 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)

Answer 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);
}

希望這對您有幫助:)