如何在JavaScript中使用平面数据构建层次结构树?

时间:2013-05-14 21:21:46

标签: javascript

我有这样的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的这种格式。

感谢您的帮助。

1 个答案:

答案 0 :(得分:5)

您的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);