How to recursively build a list of uls?

Question

JavaScript

It is necessary to form a ul list from an n dimensional array, I have been picking this code for a long time, but the process has come to a standstill - can someone look with a fresh look and tell me how to do it?

Actually this is the structure:

[
  {
    "id": 1,
    "parent_id": null,
    "children": [
      {
        "id": 2,
        "parent_id": 1,
        "children": []
      },
      {
        "id": 3,
        "parent_id": 1,
        "children": [
          {
            "id": 4,
            "parent_id": 3,
            "children": []
          }
        ]
      }
    ]
  }
]

I want to generate output like this html'ku:

<ul id="organisation">
        <li>1
            <ul>
                <li>2</li>
                <li>3
                         <ul>
                              <li>4</li>
                    </ul>
                  </li>
            </ul>
        </li>
    </ul>

Answer 1

var arr1 = [{
  "id": 1,
  "parent_id": null,
  "children": [{
      "id": 2,
      "parent_id": 1,
      "children": []
    },
    {
      "id": 3,
      "parent_id": 1,
      "children": [{
        "id": 4,
        "parent_id": 3,
        "children": []
      }]
    }
  ]
}];

recBuild(document.querySelector("#organisation"),arr1);

function recBuild(parentUl,arr){
  arr.forEach((el)=>{
  	var li = document.createElement("li");
    li.innerHTML = el.id;
    if(el.children.length > 0 ){    
      var ul = document.createElement("ul");
    	recBuild(ul,el.children);
      li.append(ul);
     }
    parentUl.appendChild(li);    
  });
}

<ul id="organisation"></ul>