Como entrada, tengo una matriz de objetos. Necesito recorrerlo y mostrar la tabla como se muestra a continuación:
const arr = [ { name: 'home/', children: [ { name: 'test1', children: [ { name: 'test3', children: [] } ] }, { name: 'test2', children: [] } ] } ] | | test1 | test3 | | home | | | | | test2 | |Puede probar con tablas anidadas. También puede probar los bordes en los elementos tr o td cuando border-collapse: collapse está configurado en el CSS del elemento de la table .
var arr = [ { name: 'home/' , children: [ { name: 'test1' , children: [ { name: 'test3' , children: [] } ] } , { name: 'test2' , children: [] } ] } ]; function makeTable(rows){ return new DocumentFragment().appendChild(rows.reduce(function(t,r){ var tr = document.createElement("tr"), td = document.createElement("td"); t.appendChild(tr) .appendChild(td) .append(r.name); r.children.length && tr.appendChild(makeTable(r.children)) return t; }, document.createElement("table"))) } document.getElementById("container") .appendChild(makeTable(arr)); table { border: 1px solid black; } <div id="container"></div>