Tengo una muestra y una matriz dinámica como esta:
nodes: [ { n1: "Foods", }, { n4: "Drinks", b7: [ { a2: "Beers", a4: [ { a5: "Budweiser", a6: "deneme", }, { a7: "Heineken", }, { a8: "1", a9: "2", }, ], }, { z1: "Wines", }, { z2: "Whiskey", }, ], }, ]Esta matriz siempre cambia dinámicamente. Quiero mostrar las claves de esta matriz en una tabla de árbol. Así que deberíamos ver la relación entre padres e hijos. Por ejemplo:
n1 n4 b7 a2 a4 a5 a6He creado esto usando vainilla javascript:
(async () => { var nodes = [{"n1":"Foods"},{"n4":"Drinks","b7":[{"a2":"Beers","a4":[{"a5":"Budweiser","a6":"deneme"},{"a7":"Heineken"},{"a8":"1","a9":"2"}]},{"z1":"Wines"},{"z2":"Whiskey"}]}]; var tree = ""; // Map each Node from the nodes async function mapNodes(nodes) { nodes.map(async (node) => { await mapNode(node); }); } // Map each key from the Node async function mapNode(node) { tree += `<ul>`; Object.keys(node).map((key) => { mapKeys(node[key], key); }); tree += `</ul>`; } // handle each key value async function mapKeys(elm) { if (typeof elm === "string") { tree += `<li>${elm}</li>`; } else if (typeof elm === "object") { await mapNode(elm); } else if (Array.isArray(elm)) { await mapNodes(elm); } } // start of the loop await mapNodes(nodes); // you can see the tree by injecting ${tree} variable to the DOM document.querySelector("div").innerHTML = tree; })(); <div></div>