如何从 JavaScript 中的平面数据构建层次结构树?

2024-05-06

我有这样的 json 数据:

Data = [{"Id":"1", "Name":"abc", "Parent":""}, {"Id":"2", "Name":"abc", "Parent":"1"},
{"Id":"3", "Name":"abc", "Parent":"2"},{"Id":"4", "Name":"abc", "Parent":"2"}]

我想将这些数据转换为层次结构树,如下所示:

root: {
        Id:"1",
        Name:"abc", 
        Parent:"",
        0: {
            Id:"2",
            Name:"abc",
            Parent:"1",
             0:{
                Id:"3",
                Name:"abc",
                Parent:"2",
             1:{
                Id:"4",
                Name:"adb",
                Parent:"2",
.....
}

目前我的想法只是将其作为数组对象,但该格式对我不起作用。因为我需要sapui5中TreeTable的这种格式。

感谢您的帮助。


您的 JSON 示例完全没有意义,因为您通常会有一些数组来保存子节点。但这是一个应该很容易适应不同结构的示例。还有优化的空间,一些循环可以组合在一起以获得稍微更高效的代码。我将所有内容分解为不同的循环,以使代码更易于理解。当然还有其他方法,但这是一种:

var data = [{"Id":"1", "Name":"abc", "Parent":""}, {"Id":"2", "Name":"abc", "Parent":"1"}, {"Id":"3", "Name":"abc", "Parent":"2"},{"Id":"4", "Name":"abc", "Parent":"2"}];

// flatten to object with string keys that can be easily referenced later
var flat = {};
for (var i = 0; i < data.length; i++) {
  var key = 'id' + data[i].Id;
  flat[key] = data[i];
}

// add child container array to each node
for (var i in flat) {
  flat[i].children = []; // add children container
}

// populate the child container arrays
for (var i in flat) {
  var parentkey = 'id' + flat[i].Parent;
  if (flat[parentkey]) {
    flat[parentkey].children.push(flat[i]);
  }
}

// find the root nodes (no parent found) and create the hierarchy tree from them
var root = [];
for (var i in flat) {
  var parentkey = 'id' + flat[i].Parent;
  if (!flat[parentkey]) {
      root.push(flat[i]);
  }
}

// here it is!
window.console.log(root);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何从 JavaScript 中的平面数据构建层次结构树? 的相关文章