javascript—在深度嵌套的json上迭代

2jcobegt 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(313)

考虑到我有一个大json，如下所示

{
  "tab": [
    {
      "children": [
        {
          "children": [
            {
              "text": "some_string",
              "href": "some_href",
              "id": "inner_child_1"
            },
            {
              "text": "some_string",
              "href": "some_href",
              "id": "inner_child_2"
            }
          ],
          "text": "some_string",
          "href": "some_href",
          "id": "first_child"
        },
        {
          "children": [
            {
              "children": [
                {
                  "children": [
                    {
                      "text": "some_string",
                      "href": "some_href",
                      "id": "more_1"
                    },
                    {
                      "text": "some_string",
                      "href": "some_href",
                      "id": "more_2"
                    }
                  ],
                  "text": "some_string",
                  "href": "some_href",
                  "id": "inner_1"
                },
                {
                  "text": "some_string",
                  "href": "some_href",
                  "id": "inner_2"
                }
              ],
              "text": "some_string",
              "href": "some_href",
              "id": "inner_first_child"
            },
            {
              "text": "some_string",
              "href": "some_href",
              "id": "inner_second_child"
            }
          ],
          "text": "some_string",
          "href": "some_href",
          "id": "second_child"
        }
      ],
      "text": "some_string",
      "href": "some_href",
      "id": "root_folder"
    }
  ]
}

嵌套可以进行到多个层次
最终目标是迭代json并使用指定的ID创建文件夹。
如果对象具有子数组，请创建一个id为且在子数组上循环的父文件夹，如果子数组中的任何条目嵌套了子数组，请创建另一个子文件夹并继续，直到找不到子数组为止。如果没有子项，则继续下一次迭代。
最终的文件夹结构可能如下所示：

|--root_folder
    |-- first_child
        |-- inner_child_1
        |-- inner_child_2
    |-- second_child
        |-- inner_first_child
            |-- inner_1
                |-- more_1
                |-- more_2
            |-- inner_2
        |-- inner_second_child

有人能帮我找出如何以最好的方式实现这一点吗？

JSON loops JavaScript

来源：https://stackoverflow.com/questions/68336733/iterating-over-deeply-nested-json

1条答案

按热度按时间

im9ewurl1#

像这样的？

function parseData(obj, parent)
{
  const item = document.createElement("li"),
        a = document.createElement("a");

  a.href = obj.href;
  a.textContent = obj.text + " (id: " + obj.id + ")";
  item.appendChild(a);

  if (!obj.children)
    item.id = obj.id;

  parent.appendChild(item);

  if (obj.children)
  {
    const folder = document.createElement("ul");
    folder.id = obj.id;
    for(let i = 0; i < obj.children.length; i++)
      parseData(obj.children[i], folder); // loop through items inside folder

    parent.appendChild(folder);
  }
}

const data = {
  "tab": [
    {
      "children": [
        {
          "children": [
            {
              "text": "some_string",
              "href": "some_href",
              "id": "inner_child_1"
            },
            {
              "text": "some_string",
              "href": "some_href",
              "id": "inner_child_2"
            }
          ],
          "text": "some_string",
          "href": "some_href",
          "id": "first_child"
        },
        {
          "children": [
            {
              "children": [
                {
                  "children": [
                    {
                      "text": "some_string",
                      "href": "some_href",
                      "id": "more_1"
                    },
                    {
                      "text": "some_string",
                      "href": "some_href",
                      "id": "more_2"
                    }
                  ],
                  "text": "some_string",
                  "href": "some_href",
                  "id": "inner_1"
                },
                {
                  "text": "some_string",
                  "href": "some_href",
                  "id": "inner_2"
                }
              ],
              "text": "some_string",
              "href": "some_href",
              "id": "inner_first_child"
            },
            {
              "text": "some_string",
              "href": "some_href",
              "id": "inner_second_child"
            }
          ],
          "text": "some_string",
          "href": "some_href",
          "id": "second_child"
        }
      ],
      "text": "some_string",
      "href": "some_href",
      "id": "root_folder"
    }
  ]
};

for(let i = 0; i < data.tab.length; i++)
  parseData(data.tab[i], document.getElementById("main"));

<ul id="main"></ul>

赞(0）回复(0）举报 2021-09-13

我来回答

javascript—在深度嵌套的json上迭代

1条答案

相关问题

热门标签

最新问答