从未知深度对象构建树

【问题标题】：Build Tree from unknown Depth Object从未知深度对象构建树
【发布时间】：2020-10-17 17:53:36
【问题描述】：

给定一个未知的对象深度，并尝试构建一个左右树，根据它们的相关属性，“父母”将前往左侧，“孩子”将前往右侧。 如何递归循环以从每个孩子/父母那里获取数据并分配 它像下面的 td 元素 expected result

到目前为止我的尝试会导致this

代码：

// 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>

【问题讨论】：

    标签： javascript html arrays object multidimensional-array


    【解决方案1】：

    我稍微修改了您的代码。与其创建一张表，不如为根、父和子创建三个表。然后应用一点 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"))

    【讨论】：

    • 欣赏，但由于深度未知，9K084408B 有 2 个孩子，如何让他们分成两个不同的行？因为目前他们处于同一水平
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-07-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-08-31
    • 2019-08-20
    • 2012-02-16
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode