Iterating over deeply Nested JSON

Question

Given that I have a large JSON as follows

{
  "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"
    }
  ]
}

The nesting could go on up to multiple levels

The end goal is to iterate over the JSON and create folders with the IDs specified.

If an object has a children's array create a parent folder with Id and loop on children, if any entry in children's array has a children's array nested then create another subfolder and continue till there are no children's array is found. If there are no children continue with the next iteration.

The final folder structure might be as follows:

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

Can anyone help me figure out how to do it in the best possible way to achieve this?

Answer 1

Something like this?

 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>