从未知深度构建树 Object
[英]Build Tree from unknown Depth Object
问题描述
Given an unknown depth of object and trying to build a left & right tree, based on their related properties, the "PARENT" would go to the left side and "CHILD" to the right side.
给定 object 的未知深度并尝试构建左右树，基于它们的相关属性，“父”将 go 到左侧，“孩子”到右侧。 how to loop recursively to get the data from each children/parent and assign it to the td elements like below expected result如何递归循环以从每个子/父获取数据并将其分配给 td 元素，如下面的预期结果
what my attemp so far would resulting this到目前为止我的尝试会导致这个
The Code:编码：
// My JSON Data var object = {}, leaf = {}; const act = [{ "lotn": "9H042208M", "kcnt": 2, "excode": "53", "wkkt": "Y510", "wkkb": " ", "ryo": 21, "zuban": "G406100B", "eday": "Sep 18, 2019 7:45:02 AM", "linklot": "9K0844080", "groupType": "PARENT" }, { "lotn": "9H0422080", "kcnt": 47, "excode": "65", "wkkt": "Y510", "wkkb": " ", "ryo": 21, "zuban": "G406100B", "eday": "Sep 15, 2019 8:23:13 AM", "linklot": "9H042208M", "groupType": "PARENT" }, { "lotn": "116902900300", "kcnt": 1, "excode": "14", "wkkt": "C990", "wkkb": " ", "ryo": 296, "zuban": "G406100B", "eday": "Aug 20, 2019 2:19:39 PM", "linklot": "9H0422080", "groupType": "PARENT" }, { "lotn": "9H069308P", "kcnt": 2, "excode": "53", "wkkt": "Y510", "wkkb": " ", "ryo": 10, "zuban": "G406100B", "eday": "Sep 18, 2019 7:45:02 AM", "linklot": "9K0844080", "groupType": "PARENT" }, { "lotn": "9H0693080", "kcnt": 49, "excode": "65", "wkkt": "Y510", "wkkb": " ", "ryo": 17, "zuban": "G406100B", "eday": "Sep 16, 2019 1:07:09 PM", "linklot": "9H069308P", "groupType": "PARENT" }, { "lotn": "116903000500", "kcnt": 1, "excode": "14", "wkkt": "C990", "wkkb": " ", "ryo": 361, "zuban": "G406100B", "eday": "Aug 24, 2019 8:55:46 PM", "linklot": "9H0693080", "groupType": "PARENT" }, { "lotn": "9K054908K", "kcnt": 2, "excode": "53", "wkkt": "Y510", "wkkb": " ", "ryo": 19, "zuban": "G406100B", "eday": "Sep 18, 2019 7:45:02 AM", "linklot": "9K0844080", "groupType": "PARENT" }, { "lotn": "9K0549080", "kcnt": 23, "excode": "65", "wkkt": "Y510", "wkkb": " ", "ryo": 19, "zuban": "G406100B", "eday": "Sep 15, 2019 2:32:10 PM", "linklot": "9K054908K", "groupType": "PARENT" }, { "lotn": "9H1128080", "kcnt": 20, "excode": "65", "wkkt": "E720", "wkkb": " ", "ryo": 301, "zuban": "G406100B", "eday": "Sep 11, 2019 1:29:34 PM", "linklot": "9K0549080", "groupType": "PARENT" }, { "lotn": "116903100400", "kcnt": 1, "excode": "14", "wkkt": "C990", "wkkb": " ", "ryo": 296, "zuban": "G406100B", "eday": "Aug 31, 2019 10:37:47 AM", "linklot": "9H1128080", "groupType": "PARENT" }, { "lotn": "9K0844080", "kcnt": 0, "excode": "", "wkkt": "", "wkkb": "", "ryo": 0, "zuban": "G406100B", "linklot": "", "groupType": "" }, { "lotn": "9K084408B", "kcnt": 1, "excode": "65", "wkkt": "Y510", "wkkb": " ", "ryo": 25, "zuban": "G406100B", "eday": "Sep 18, 2019 7:48:21 AM", "linklot": "9K0844080", "groupType": "CHILD" }, { "lotn": "9N1235080", "kcnt": 1, "excode": "53", "wkkt": "Y510", "wkkb": " ", "ryo": 25, "zuban": "G406100B", "eday": "Dec 24, 2019 2:25:39 PM", "linklot": "9K084408B", "groupType": "CHILD" }, { "lotn": "9N123508A", "kcnt": 1, "excode": "65", "wkkt": "Y510", "wkkb": " ", "ryo": 25, "zuban": "G406100B", "eday": "Dec 27, 2019 8:53:44 AM", "linklot": "9N1235080", "groupType": "CHILD" }, { "lotn": "9N1239080", "kcnt": 1, "excode": "53", "wkkt": "Y510", "wkkb": " ", "ryo": 21, "zuban": "G406100B", "eday": "Dec 24, 2019 2:29:10 PM", "linklot": "9K084408B", "groupType": "CHILD" }, { "lotn": "9N123908A", "kcnt": 1, "excode": "65", "wkkt": "Y510", "wkkb": " ", "ryo": 25, "zuban": "G406100B", "eday": "Dec 27, 2019 8:48:40 AM", "linklot": "9N1239080", "groupType": "CHILD" }, { "lotn": "9K084408A", "kcnt": 1, "excode": "65", "wkkt": "Y510", "wkkb": " ", "ryo": 25, "zuban": "G406100B", "eday": "Sep 18, 2019 7:48:21 AM", "linklot": "9K0844080", "groupType": "CHILD" } ]; function createcontainerView(act) { var container = [], hasil = [], root = {}, parent, child; for (var i = 0; i < act.length; i++) { parent = act[i]; if (parent.groupType == "PARENT") { object[parent.lotn] = parent; object[parent.lotn]["children"] = []; } else { leaf[parent.lotn] = parent; leaf[parent.lotn]["children"] = []; } } Object.assign(root, object, leaf); for (var lotn in root) { if (root.hasOwnProperty(lotn)) { child = root[lotn]; if (child.linklot && root[child["linklot"]]) { root[child["linklot"]]["children"].push(child); } else { container.push(child); } } } return container; } <,-- // here is how you build your UL containerview recursively --> function CreateUlcontainerView(items. parent) { var table = document;createElement('table'). var tbody = document;createElement('tbody'); for (var i = 0. i < root;length. i++) { console:log("row1; " + root[i]["lotn"]). var tbodyTr = document;createElement('tr'). tbodyTr,setAttribute('id'. 'root') var tbodyTrTd = document;createElement('td'). tbodyTrTd;innerHTML = root[i]["lotn"]. tbodyTr;appendChild(tbodyTrTd). tbody;appendChild(tbodyTr); for (var j = 0. j < root[i]["children"];length. j++) { if (root[i]["children"][j]["groupType"] == "PARENT") { var tbodyTr = document;createElement('tr'). var tbodyTrTd = document;createElement('td'). tbodyTrTd;innerHTML = root[i]["children"][j]["lotn"]. tbodyTr;appendChild(tbodyTrTd). tbody;appendChild(tbodyTr); for (var k = 0. k < root[i]["children"][j]["children"];length. k++) { var tbodyTrTr = document;createElement('td'). tbodyTrTr;innerHTML = root[i]["children"][j]["children"][k]["lotn"]. tbodyTr;prepend(tbodyTrTr); for (var l = 0. l < root[i]["children"][j]["children"][k]["children"];length. l++) { var tbodyTrTr = document;createElement('td'). tbodyTrTr;innerHTML = root[i]["children"][j]["children"][k]["children"][l]["lotn"]. tbodyTr;prepend(tbodyTrTr); for (var m = 0. m < root[i]["children"][j]["children"][k]["children"][l]["children"];length. m++) { var tbodyTrTr = document;createElement('td'). tbodyTrTr;innerHTML = root[i]["children"][j]["children"][k]["children"][l]["children"][m]["lotn"]. tbodyTr;prepend(tbodyTrTr). } } } } else if (root[i]["children"][j]["groupType"] == "CHILD") { var tbodyTr = document;createElement('tr'). var tbodyTrTd = document;createElement('td'). tbodyTrTd;innerHTML = root[i]["children"][j]["lotn"]. tbodyTr;appendChild(tbodyTrTd). tbody;appendChild(tbodyTr); for (var k = 0. k < root[i]["children"][j]["children"];length. k++) { var tbodyTrTr = document;createElement('td'). tbodyTrTr;innerHTML = root[i]["children"][j]["children"][k]["lotn"]. tbodyTr;appendChild(tbodyTrTr); for (var l = 0. l < root[i]["children"][j]["children"][k]["children"];length. l++) { var tbodyTrTr = document;createElement('td'). tbodyTrTr;innerHTML = root[i]["children"][j]["children"][k]["children"][l]["lotn"]. tbodyTr;appendChild(tbodyTrTr); for (var m = 0. m < root[i]["children"][j]["children"][k]["children"][l]["children"];length. m++) { var tbodyTrTr = document;createElement('td'). tbodyTrTr;innerHTML = root[i]["children"][j]["children"][k]["children"][l]["children"][m]["lotn"]. tbodyTr;prepend(tbodyTrTr). } } } } } table;appendChild(tbody); //do something with value. } parent;appendChild(table); } var root = createcontainerView(act), CreateUlcontainerView(object. document.getElementById("output"))
<body> <div id="output"> </div> </body>
1 个解决方案
解决方案1
0 已采纳 2020-06-27 10:54:03
I modified your code a little bit.我稍微修改了你的代码。 Instead of creating one table, Create three tables - for root, parent and children.与其创建一张表，不如为根、父和子创建三张表。 Then apply a little css to make them appear side by side.然后涂一点 css 让它们并排出现。
<style>
table {
border: 2px solid black;
float: left;
}
</style>
// My JSON Data
var object = {},
leaf = {};
const act = [{
"lotn": "9H042208M",
"kcnt": 2,
"excode": "53",
"wkkt": "Y510",
"wkkb": " ",
"ryo": 21,
"zuban": "G406100B",
"eday": "Sep 18, 2019 7:45:02 AM",
"linklot": "9K0844080",
"groupType": "PARENT"
},
{
"lotn": "9H0422080",
"kcnt": 47,
"excode": "65",
"wkkt": "Y510",
"wkkb": " ",
"ryo": 21,
"zuban": "G406100B",
"eday": "Sep 15, 2019 8:23:13 AM",
"linklot": "9H042208M",
"groupType": "PARENT"
},
{
"lotn": "116902900300",
"kcnt": 1,
"excode": "14",
"wkkt": "C990",
"wkkb": " ",
"ryo": 296,
"zuban": "G406100B",
"eday": "Aug 20, 2019 2:19:39 PM",
"linklot": "9H0422080",
"groupType": "PARENT"
},
{
"lotn": "9H069308P",
"kcnt": 2,
"excode": "53",
"wkkt": "Y510",
"wkkb": " ",
"ryo": 10,
"zuban": "G406100B",
"eday": "Sep 18, 2019 7:45:02 AM",
"linklot": "9K0844080",
"groupType": "PARENT"
},
{
"lotn": "9H0693080",
"kcnt": 49,
"excode": "65",
"wkkt": "Y510",
"wkkb": " ",
"ryo": 17,
"zuban": "G406100B",
"eday": "Sep 16, 2019 1:07:09 PM",
"linklot": "9H069308P",
"groupType": "PARENT"
},
{
"lotn": "116903000500",
"kcnt": 1,
"excode": "14",
"wkkt": "C990",
"wkkb": " ",
"ryo": 361,
"zuban": "G406100B",
"eday": "Aug 24, 2019 8:55:46 PM",
"linklot": "9H0693080",
"groupType": "PARENT"
},
{
"lotn": "9K054908K",
"kcnt": 2,
"excode": "53",
"wkkt": "Y510",
"wkkb": " ",
"ryo": 19,
"zuban": "G406100B",
"eday": "Sep 18, 2019 7:45:02 AM",
"linklot": "9K0844080",
"groupType": "PARENT"
},
{
"lotn": "9K0549080",
"kcnt": 23,
"excode": "65",
"wkkt": "Y510",
"wkkb": " ",
"ryo": 19,
"zuban": "G406100B",
"eday": "Sep 15, 2019 2:32:10 PM",
"linklot": "9K054908K",
"groupType": "PARENT"
},
{
"lotn": "9H1128080",
"kcnt": 20,
"excode": "65",
"wkkt": "E720",
"wkkb": " ",
"ryo": 301,
"zuban": "G406100B",
"eday": "Sep 11, 2019 1:29:34 PM",
"linklot": "9K0549080",
"groupType": "PARENT"
},
{
"lotn": "116903100400",
"kcnt": 1,
"excode": "14",
"wkkt": "C990",
"wkkb": " ",
"ryo": 296,
"zuban": "G406100B",
"eday": "Aug 31, 2019 10:37:47 AM",
"linklot": "9H1128080",
"groupType": "PARENT"
},
{
"lotn": "9K0844080",
"kcnt": 0,
"excode": "",
"wkkt": "",
"wkkb": "",
"ryo": 0,
"zuban": "G406100B",
"linklot": "",
"groupType": ""
},
{
"lotn": "9K084408B",
"kcnt": 1,
"excode": "65",
"wkkt": "Y510",
"wkkb": " ",
"ryo": 25,
"zuban": "G406100B",
"eday": "Sep 18, 2019 7:48:21 AM",
"linklot": "9K0844080",
"groupType": "CHILD"
},
{
"lotn": "9N1235080",
"kcnt": 1,
"excode": "53",
"wkkt": "Y510",
"wkkb": " ",
"ryo": 25,
"zuban": "G406100B",
"eday": "Dec 24, 2019 2:25:39 PM",
"linklot": "9K084408B",
"groupType": "CHILD"
},
{
"lotn": "9N123508A",
"kcnt": 1,
"excode": "65",
"wkkt": "Y510",
"wkkb": " ",
"ryo": 25,
"zuban": "G406100B",
"eday": "Dec 27, 2019 8:53:44 AM",
"linklot": "9N1235080",
"groupType": "CHILD"
},
{
"lotn": "9N1239080",
"kcnt": 1,
"excode": "53",
"wkkt": "Y510",
"wkkb": " ",
"ryo": 21,
"zuban": "G406100B",
"eday": "Dec 24, 2019 2:29:10 PM",
"linklot": "9K084408B",
"groupType": "CHILD"
},
{
"lotn": "9N123908A",
"kcnt": 1,
"excode": "65",
"wkkt": "Y510",
"wkkb": " ",
"ryo": 25,
"zuban": "G406100B",
"eday": "Dec 27, 2019 8:48:40 AM",
"linklot": "9N1239080",
"groupType": "CHILD"
},
{
"lotn": "9K084408A",
"kcnt": 1,
"excode": "65",
"wkkt": "Y510",
"wkkb": " ",
"ryo": 25,
"zuban": "G406100B",
"eday": "Sep 18, 2019 7:48:21 AM",
"linklot": "9K0844080",
"groupType": "CHILD"
}
];
function createcontainerView(act) {
var container = [],
hasil = [],
root = {},
parent,
child;
for (var i = 0; i < act.length; i++) {
parent = act[i];
if (parent.groupType == "PARENT") {
object[parent.lotn] = parent;
object[parent.lotn]["children"] = [];
} else {
leaf[parent.lotn] = parent;
leaf[parent.lotn]["children"] = [];
}
}
Object.assign(root, object, leaf);
for (var lotn in root) {
if (root.hasOwnProperty(lotn)) {
child = root[lotn];
if (child.linklot && root[child["linklot"]]) {
root[child["linklot"]]["children"].push(child);
} else {
container.push(child);
}
}
}
return container;
}
<!-- // here is how you build your UL containerview recursively -->
function CreateUlcontainerView(items, parent) {
var tabler = document.createElement('table'); // root table
var tbodyr = document.createElement('tbody'); // root table
var tablep = document.createElement('table'); // parent table
var tbodyp = document.createElement('tbody'); // parent table
var tablec = document.createElement('table'); // children table
var tbodyc = document.createElement('tbody'); // children table
for (var i = 0; i < root.length; i++) {
console.log("row1 : " + root[i]["lotn"]);
var tbodyTr = document.createElement('tr');
tbodyTr.setAttribute('id', 'root')
var tbodyTrTd = document.createElement('td');
tbodyTrTd.innerHTML = root[i]["lotn"];
tbodyTr.appendChild(tbodyTrTd);
tbodyr.appendChild(tbodyTr);
for (var j = 0; j < root[i]["children"].length; j++) {
if (root[i]["children"][j]["groupType"] == "PARENT") {
var tbodyTr = document.createElement('tr');
var tbodyTrTd = document.createElement('td');
tbodyTrTd.innerHTML = root[i]["children"][j]["lotn"];
tbodyTr.appendChild(tbodyTrTd);
tbodyp.appendChild(tbodyTr);
for (var k = 0; k < root[i]["children"][j]["children"].length; k++) {
var tbodyTrTr = document.createElement('td');
tbodyTrTr.innerHTML = root[i]["children"][j]["children"][k]["lotn"];
tbodyTr.prepend(tbodyTrTr);
for (var l = 0; l < root[i]["children"][j]["children"][k]["children"].length; l++) {
var tbodyTrTr = document.createElement('td');
tbodyTrTr.innerHTML = root[i]["children"][j]["children"][k]["children"][l]["lotn"];
tbodyTr.prepend(tbodyTrTr);
for (var m = 0; m < root[i]["children"][j]["children"][k]["children"][l]["children"].length; m++) {
var tbodyTrTr = document.createElement('td');
tbodyTrTr.innerHTML = root[i]["children"][j]["children"][k]["children"][l]["children"][m]["lotn"];
tbodyTr.prepend(tbodyTrTr);
}
}
}
} else if (root[i]["children"][j]["groupType"] == "CHILD") {
var tbodyTr = document.createElement('tr');
var tbodyTrTd = document.createElement('td');
tbodyTrTd.innerHTML = root[i]["children"][j]["lotn"];
tbodyTr.appendChild(tbodyTrTd);
tbodyc.appendChild(tbodyTr);
for (var k = 0; k < root[i]["children"][j]["children"].length; k++) {
var tbodyTrTr = document.createElement('td');
tbodyTrTr.innerHTML = root[i]["children"][j]["children"][k]["lotn"];
tbodyTr.appendChild(tbodyTrTr);
for (var l = 0; l < root[i]["children"][j]["children"][k]["children"].length; l++) {
var tbodyTrTr = document.createElement('td');
tbodyTrTr.innerHTML = root[i]["children"][j]["children"][k]["children"][l]["lotn"];
tbodyTr.appendChild(tbodyTrTr);
for (var m = 0; m < root[i]["children"][j]["children"][k]["children"][l]["children"].length; m++) {
var tbodyTrTr = document.createElement('td');
tbodyTrTr.innerHTML = root[i]["children"][j]["children"][k]["children"][l]["children"][m]["lotn"];
tbodyTr.prepend(tbodyTrTr);
}
}
}
}
}
tabler.appendChild(tbodyr);// root table
tablep.appendChild(tbodyp);// parent table
tablec.appendChild(tbodyc);// children table
//do something with value;
}
parent.appendChild(tablep);// parent table
parent.appendChild(tabler);// root table
parent.appendChild(tablec);// children table
}
var root = createcontainerView(act);
CreateUlcontainerView(object, document.getElementById("output"))
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
建设性地操纵未知深度的JSON树中的任何值/对象 - Constructively manipulating any value/object within a JSON tree of unknown depth
使用jQuery从未知深度的嵌套JSON构建层叠下拉菜单 - Build Cascading dropdown from nested JSON of unknown depth with jQuery
从对象构建目录树 - Build a directory tree from an object
从树 object 构建 object 数组 - build array of object from tree object
使用JavaScript从平面数组构建深度对象 - Build a Depth Level Object from a Flat Array in JavaScript
从树 object 构建平面对象数组 - build flat array of objects from tree object
当只知道“深度”而不知道“父 ID”时，从平面有序数组构建树数组 - Build tree array from flat ordered array when only "depth" and NOT "parent ID" is known
获取未知深度 object 内的元素 JavaScript - Get element inside object of unknown depth JavaScript
动态遍历未知深度键的对象 - Dynamically traverse an object of unknown depth's keys
Javascript遍历未知深度的对象 - Javascript Iterating through unknown-depth object
相关标签