javascript - 递归查找 JSON 值并返回对象

Question

我有一些嵌套的对象数据，我想搜索它并根据名称返回与父对象匹配的对象。

如果我想搜索孩子，我的代码效果很好，但是如果我开始搜索它的父（品牌和组织，媒体），我会得到一个空数组。

JSON

{
    "categories": [
        {
            "id": 1,
            "name": "Brands and Organizations",
            "type": "dir",
            "children": [
                {
                    "id": 2,
                    "name":"Apple",
                    "parentId": 1,
                    "children": [
                        {
                            "id": 8,
                            "name":"Iphone",
                            "parentId": 2
                        }
                    ]
                },
                 {
                    "id":3,
                    "name":"Samsung",
                    "parentId": 1
                }
            ]
        },
        {
            "id": 4,
            "name": "Media",
            "type": "dir",
            "children": [
                {
                    "id": 5,
                    "name":"CD",
                    "parentId": 4
                },
                 {
                    "id":6,
                    "name":"DVD",
                    "parentId": 4
                }
            ]
        },
        {
            "id": 7,
            "name": "Inlfuenser",
            "type": "dir",
            "children": null
        }
    ]
}

Javascript

function filterJson(categories, search) {

   var matches = [];
    if (!Array.isArray(categories)) return matches;

    categories.forEach(function(category) {

        if (category.name.includes(search)) {
            matches.push(category);
        } else {
            let childResults = filterJson(category.children, search);
            if (childResults.length)
                matches.push(Object.assign({}, category, { children: childResults }));
        }
    })

return matches;

提前致谢！！！！！！

标签： javascript

Answer 1

我认为当您键入不同大小写的字符时会出现问题，您可以将搜索词转换为小写以解决该问题。

var object = {
    "categories": [
        {
            "id": 1,
            "name": "Brands and Organizations",
            "type": "dir",
            "children": [
                {
                    "id": 2,
                    "name":"Apple",
                    "parentId": 1,
                    "children": [
                        {
                            "id": 8,
                            "name":"Iphone",
                            "parentId": 2
                        }
                    ]
                },
                 {
                    "id":3,
                    "name":"Samsung",
                    "parentId": 1
                }
            ]
        },
        {
            "id": 4,
            "name": "Media",
            "type": "dir",
            "children": [
                {
                    "id": 5,
                    "name":"CD",
                    "parentId": 4
                },
                 {
                    "id":6,
                    "name":"DVD",
                    "parentId": 4
                }
            ]
        },
        {
            "id": 7,
            "name": "Inlfuenser",
            "type": "dir",
            "children": null
        }
    ]
};


function filterJson(categories, search) {

   var search = search.toLowerCase().trim();
   var matches = [];
    if (!Array.isArray(categories)) return matches;

    categories.forEach(function(category) {

        if (category.name.toLowerCase().includes(search)) {
            matches.push(category);
        } else {
            let childResults = filterJson(category.children, search);
            if (childResults.length)
                matches.push(Object.assign({}, category, { children: childResults }));
        }
    })

return matches;
}

function filter(value) {
console.log(value);
var matches = filterJson(object.categories, value);
console.log(matches);
document.getElementById('matches').innerHTML = JSON.stringify(matches);
}

<input type="text" onchange="filter(this.value)" />

<div id="matches"></div>