循环树状结构（id 和 parent_id）

Question

我有一棵树 object 从数据库生成，我的数据来自 Excel

我想循环这个 object 来获取像树一样的元素

例如：我想在表格中显示数据，或者做一个 select 取决于另一个 select 到 select 资产

或者你认为我应该改变我的 object 结构吗？¿

Excel

Object（来自 JSON）

[
{"id":"1000","name":"GRUPOS GENERADORES","parent_id":"0"},
{"id":"1100","name":"MOTORES","parent_id":"1000"},
{"id":"1100.1","name":"MOTOR Nº 1","parent_id":"1100"},
{"id":"1100.2","name":"MOTOR Nº 2","parent_id":"1100"},
{"id":"1100.3","name":"MOTOR Nº 3","parent_id":"1100"},
{"id":"1200","name":"SISTEMAS AUXILIARES MOTOR","parent_id":"1000"},
{"id":"1240","name":"INSTRUMENTACIÓN Y CONTROL","parent_id":"1200"},
{"id":"1242","name":"INSTRUMENTACIÓN","parent_id":"1240"},
{"id":"2000","name":"INSTALACIONES AUXILIARES GRUPOS","parent_id":"0"},
{"id":"2100","name":"REFRIGERACIÓN","parent_id":"2000"},
{"id":"2110","name":"AEROREFRIGERADORES","parent_id":"2100"},
{"id":"2110.1","name":"AEROREFRIGERADOR AR1","parent_id":"2110"},
{"id":"2110.2","name":"AEROREFRIGERADOR AR2","parent_id":"2110"},
{"id":"2110.3","name":"AEROREFRIGERADOR AR3","parent_id":"2110"},
{"id":"2110.4","name":"AEROREFRIGERADOR AR4","parent_id":"2110"},
{"id":"2110.5","name":"AEROREFRIGERADOR AR5","parent_id":"2110"}
{"id":"2160","name":"INSTRUMENTACIÓN","parent_id":"2100"},
{"id":"2160.1","name":"CAUDALÍMETRO AT","parent_id":"2160"},
{"id":"2160.2","name":"CAUDALÍMETRO BT","parent_id":"2160"},
]

我使用此方法尝试从给定名称父级获取子元素，但如果我使用重复的名称调用该方法，则此方法不起作用。

 function filter_by(filter) { const id = data.filter(i => (i.name === filter))[0].id const data_filtered = data.filter(i => (i.parent_id === id)) return data_filtered } console.log(filter_by("AEROREFRIGERADORES")) // this throws an error // console.log(filter_by("INSTRUMENTACIÓN"))

 <script> const data = [ {"id":"1000","name":"GRUPOS GENERADORES","parent_id":"0"}, {"id":"1100","name":"MOTORES","parent_id":"1000"}, {"id":"1100.1","name":"MOTOR Nº 1","parent_id":"1100"}, {"id":"1100.2","name":"MOTOR Nº 2","parent_id":"1100"}, {"id":"1100.3","name":"MOTOR Nº 3","parent_id":"1100"}, {"id":"2000","name":"INSTALACIONES AUXILIARES GRUPOS","parent_id":"0"}, {"id":"2100","name":"REFRIGERACIÓN","parent_id":"2000"}, {"id":"2110","name":"AEROREFRIGERADORES","parent_id":"2100"}, {"id":"2110.1","name":"AEROREFRIGERADOR AR1","parent_id":"2110"}, {"id":"2110.2","name":"AEROREFRIGERADOR AR2","parent_id":"2110"}, {"id":"2110.3","name":"AEROREFRIGERADOR AR3","parent_id":"2110"}, {"id":"2110.4","name":"AEROREFRIGERADOR AR4","parent_id":"2110"}, {"id":"2110.5","name":"AEROREFRIGERADOR AR5","parent_id":"2110"} ]; </script>

Answer 1

您可以先通过parent_id获取子项，然后找到父项并返回该节点的子项。

 const find = (data, name) => { const children = data.reduce((r, o) => ((r[o.parent_id]??= []).push(o), r), {}); return children[data.find(o => o.name === name).id]; }, data = [{ id: "1000", name: "GRUPOS GENERADORES", parent_id: "0" }, { id: "1100", name: "MOTORES", parent_id: "1000" }, { id: "1100.1", name: "MOTOR Nº 1", parent_id: "1100" }, { id: "1100.2", name: "MOTOR Nº 2", parent_id: "1100" }, { id: "1100.3", name: "MOTOR Nº 3", parent_id: "1100" }, { id: "2000", name: "INSTALACIONES AUXILIARES GRUPOS", parent_id: "0" }, { id: "2100", name: "REFRIGERACIÓN", parent_id: "2000" }, { id: "2110", name: "AEROREFRIGERADORES", parent_id: "2100" }, { id: "2110.1", name: "AEROREFRIGERADOR AR1", parent_id: "2110" }, { id: "2110.2", name: "AEROREFRIGERADOR AR2", parent_id: "2110" }, { id: "2110.3", name: "AEROREFRIGERADOR AR3", parent_id: "2110" }, { id: "2110.4", name: "AEROREFRIGERADOR AR4", parent_id: "2110" }, { id: "2110.5", name: "AEROREFRIGERADOR AR5", parent_id: "2110" }], result = find(data, 'AEROREFRIGERADORES'); console.log(result);

 .as-console-wrapper { max-height: 100%;important: top; 0; }

Answer 2

你可以：

• 从平面数组输入创建嵌套森林结构
• 从该树创建一个二维数组
• 从该二维数组创建一个 HTML 表（作为示例输出）

以下是执行此操作的三个函数：

 function toForest(data, topLevelParentId="0") { let children = []; // root(s) of the forest to populate let map = new Map(data.map(({id, name, parent_id}) => [id, {id, name, children: [] }])).set(topLevelParentId, { children }); // Create an entry to hold all the roots for (let {id, parent_id} of data) map.get(parent_id).children.push(map.get(id)); return children; } function toMatrix(forest, depth=0) { let table = (forest?? []).flatMap(({id, name, children}) => [[id, name], ...toMatrix(children, depth + 1).map(row => ["", ...row])] ); // Pad rows at the right, so they are all of equal length let maxWidth = Math.max(...table.map(row => row.length)); return table.map(row => row.concat(...Array.from({length: maxWidth - row.length}, () => "")) ); } function toHTML(matrix) { return `<table>${matrix.map(row => `<tr>${row.map(cell => `<td>${cell}</td>`).join("")}</td>` ).join("\n")}</table>`; } // demo let data = [{"id":"1000","name":"GRUPOS GENERADORES","parent_id":"0"},{"id":"1100","name":"MOTORES","parent_id":"1000"},{"id":"1100.1","name":"MOTOR Nº 1","parent_id":"1100"},{"id":"1100.2","name":"MOTOR Nº 2","parent_id":"1100"},{"id":"1100.3","name":"MOTOR Nº 3","parent_id":"1100"},{"id":"1200","name":"SISTEMAS AUXILIARES MOTOR","parent_id":"1000"},{"id":"1240","name":"INSTRUMENTACIÓN Y CONTROL","parent_id":"1200"},{"id":"1242","name":"INSTRUMENTACIÓN","parent_id":"1240"},{"id":"2000","name":"INSTALACIONES AUXILIARES GRUPOS","parent_id":"0"},{"id":"2100","name":"REFRIGERACIÓN","parent_id":"2000"},{"id":"2110","name":"AEROREFRIGERADORES","parent_id":"2100"},{"id":"2110.1","name":"AEROREFRIGERADOR AR1","parent_id":"2110"},{"id":"2110.2","name":"AEROREFRIGERADOR AR2","parent_id":"2110"},{"id":"2110.3","name":"AEROREFRIGERADOR AR3","parent_id":"2110"},{"id":"2110.4","name":"AEROREFRIGERADOR AR4","parent_id":"2110"},{"id":"2110.5","name":"AEROREFRIGERADOR AR5","parent_id":"2110"},{"id":"2160","name":"INSTRUMENTACIÓN","parent_id":"2100"},{"id":"2160.1","name":"CAUDALÍMETRO AT","parent_id":"2160"},{"id":"2160.2","name":"CAUDALÍMETRO BT","parent_id":"2160"},]; let forest = toForest(data); // nested structure let matrix = toMatrix(forest); // 2D array let html = toHTML(matrix); // <table> document.getElementById("container").innerHTML = html;

 table { border-collapse: collapse } td { border: 1px solid; font-size: smaller }

 <div id="container"></div>

对于选择，您将首先在forest中找到节点，然后将找到的节点传递给toMatrix function。