javascript - 遍历复杂的嵌套 json 数组 javascript

Question

nested json structure

Json 结构:

{
"id": "30080",
        "dataelements": {
    "Name": "abc",
        },
        "children": [
            {
                "id": "33024",
                "dataelements": {
                    "Name": "a",
                    },
                "children": [
                    {
                        "id": "33024",
                        "dataelements": {
                            "Name": "b"

                            },
                        "children": [
                            {
                                "id": "33024",
                                "dataelements": {
                                    "Name": "z"
                                    },
                                "children": []
                            }
                        ]
                    }
                ]
            },
            {
                "id": "4800",
                "dataelements": {
                    "Name": "d"
                    },
                "children": [
                    {
                        "id": "4800",
                        "dataelements": {

......................................

我有如图所示的嵌套 json 数据。对于每个子对象，我都创建了一个节点模型。子对象内部可以有其他子对象。

 if (ele == "dataelements")
{
    var categoryNode = new NodeModel(
    {
        label: row.dataelements.Name,
        icons: [{ iconName: 'product'}],
        grid: row[ele] 
    });
}

if(ele == "children")
{
    var subCategoryNode;
    var subCategoryIndex = 1;
    for (var i = 0, len = row.children.length; i<len; i++) 
    {
        subCategoryNode = new NodeModel(
        {
            label: row.children[i].dataelements.Name,
            icons: [{
            iconName: '3dpart' }],
            grid: row.children[i].dataelements                             
        });

        categoryNode.addChild(subCategoryNode);
    }
}

此代码仅处理一级子节点。当我不知道内部嵌套了多少子级时，如何检查内部子级？

Answer 1

快速了解递归函数和需要注意的问题

• 递归函数非常适合嵌套数据
• 他们为输入的每次迭代调用自己，直到它达到基本情况
• 一开始可能很难理解它们
• 如果使用不当或输入量过大，递归函数可能会达到调用堆栈限制
• 寻找递归调用中使用的变量，使用let关键字告诉javascript在当前范围内设置变量

解决方案

假设您的 JSON 已经过验证，这就是下面示例中的结构。如果我想遍历 JSON 中的所有元素，我想使用递归调用使其简洁、易于调试和构建。

这是一个遍历给定示例 JSON 以打印出分解图的示例。

如何使用下面的代码

• 复制递归搜索函数
• 调用传入 JSON 的recursiveSearch 函数
• 根据您的需要修改它，我给了您一些可以构建的东西

代码

    var someJson = {"id": "30080","dataelements": {"Name": "abc"},"children": [{"id": "33024","dataelements": {"Name": "a"},"children": [{"id": "33024","dataelements": {"Name": "b"},"children": [{"id": "33024","dataelements": {"Name": "z"},"children": []}]}]}, {"id": "4800","dataelements": {"Name": "d"},"children": []}]};

    //we set level to 0 (optional variable) this means we can omit it in the inital call for neat code
    function recursiveScan(json, level=0)
    {
        //we store all of the output in a log and keep a track of the level to determine indenting
        var log = "";
        var indent = "";

        //based on the current level of the recursion, we indent the text to make it readable
        for (let i=0; i<level; i++)
        {
            indent += "&emsp;&emsp;";
        }

        //avoid any bad json or invalid data by checking if the name and id is null
        if(json.dataelements.Name != null && json.id != null)
        {
            //we know there is a valid element, write the name and id
            log += indent + "ID: " + json.id + "<br>";
            log += indent + "Name: " + json.dataelements.Name + "<br>";

            //if there is any children
            if(json.children.length > 0)
            {
                //just for neatness, lets draw the paranthesis
                log += indent + "{" + "<br>";

                //increase the level
                level++;

                //for each child, recursively call this function to get the next level of children if available
                for(let t=0; t<json.children.length; t++)
                {
                    log += recursiveScan(json.children[t], level);
                }

                //we are dropping our recursion level now, getting ready to return;
                level--;
                //close the paranthesis for neatness
                log += indent + "}" + "<br>";
            }
        }

        //return the final log
        return log;
    }

    //now lets test the code
    document.write(recursiveScan(someJson));

以上代码产生

    ID: 30080
    Name: abc
    {
      ID: 33024
      Name: a
      {
        ID: 33024
        Name: b
        {
          ID: 33024
          Name: z
        }
      }
      ID: 4800
      Name: d
    }

现在是一个没有所有噪音的简单破败

    function recursiveScan(json)
    {
        if(json.dataelements.Name != null && json.id != null)
        {
            //here you have access to id and dataelements

            if(json.children.length > 0)
            {
                for(let t=0; t<json.children.length; t++)
                {
                    //here you have access to each child as json.children[t]
                    //you could do the logic for the current child

                    //then pass the current child to the recursive function
                    recursiveScan(json.children[t]);
                }
            }
        }
        return true;
    }