在javascript中将树从db格式转换为json格式

Question

我正在尝试将我的数据从这种格式转换为客户端：

let testLoad=  [{"id":7,"name":"Kuwait","parentId":2},
                    {"id":4,"name":"Iraq","parentId":2},
                    {"id":10,"name":"Qatar","parentId":2},
                    {"id":2,"name":"Middle East","parentId":1},
                    {"id":3,"name":"Bahrain","parentId":2},
                    {"id":6,"name":"Jordan","parentId":2},
                    {"id":8,"name":"Lebanon","parentId":2},
                    {"id":1,"name":"Africa/Middle East","parentId":null},
                    {"id":5,"name":"Israel","parentId":2},
                    {"id":9,"name":"Oman","parentId":2}];

此格式：

   let testLoad=  [{"id":55,"text":"Africa/Middle East","children":[
      {"id":2,"text":"Middle East","children":   [{"id":7,"name":"Kuwait","children":[]},
{"id":4,"name":"Iraq","children":[]},
{"id":10,"name":"Qatar","children":[]},
{"id":3,"name":"Bahrain","children":[]},
{"id":6,"name":"Jordan","children":[]},
{"id":8,"name":"Lebanon","children":[]},
{"id":5,"name":"Israel","children":[]},
{"id":9,"name":"Oman","children":[]}]}]

所以我可以在树库中使用它，比如 JavaScript 中的 gijgo 树或 jstree。

Answer 1

你可以使用递归：

var testLoad=  [{"id":7,"name":"Kuwait","parentId":2},
                    {"id":4,"name":"Iraq","parentId":2},
                    {"id":10,"name":"Qatar","parentId":2},
                    {"id":2,"name":"Middle East","parentId":1},
                    {"id":3,"name":"Bahrain","parentId":2},
                    {"id":6,"name":"Jordan","parentId":2},
                    {"id":8,"name":"Lebanon","parentId":2},
                    {"id":1,"name":"Africa/Middle East","parentId":null},
                    {"id":5,"name":"Israel","parentId":2},
                    {"id":9,"name":"Oman","parentId":2}];

function lookingForNodeWithParent( nodes, parentId ) {

  var arrayToReturn = [];

  for( var i = 0, length = nodes.length; i < length; i++ ) {
    if( nodes[i].parentId === parentId ) {
        var node = nodes[i];
      
      arrayToReturn.push({
        id: node.id,
        name: node.name,
        children: lookingForNodeWithParent( nodes, node.id )
      });
    }
  }
  
  return arrayToReturn;
}

var array = lookingForNodeWithParent( testLoad, null );
console.log( array )

Answer 2

最简单的方法是根据物品的 ID 创建物品地图。

示例： var objectMap = {5: {"name":"Jordan","children":[], ParentId: '2'}}

然后你可以迭代它们来构建你的结构：

for (key in objectMap) {
    var object = objectMap[key];
    var parent = objectMap[parseInt(object.parentId)];
    parent.children.push(object);
}

Answer 3

您可以从中收集所有节点和构建的零件树，并获取收集对象树的根注释。

• 它在单个循环中工作。

• 它适用于未排序的数据。

• 它为任何节点构建具有给定数据的节点，并将该节点中的部分作为父节点，如果不存在则将其作为子节点。

var data = [{ id: 7, name: "Kuwait", parentId: 2 }, { id: 4, name: "Iraq", parentId: 2 }, { id: 10, name: "Qatar", parentId: 2 }, { id: 2, name: "Middle East", parentId: 1 }, { id: 3, name: "Bahrain", parentId: 2 }, { id: 6, name: "Jordan", parentId: 2 }, { id: 8, name: "Lebanon", parentId: 2 }, { id: 1, name: "Africa/Middle East", parentId: null }, { id: 5, name: "Israel", parentId: 2 }, { id: 9, name: "Oman", parentId: 2 }],
    tree = function (data, root) {
        var r = [], o = {};
        data.forEach(function (a) {
            a.children = o[a.id] && o[a.id].children || [];
            o[a.id] = a;
            if (a.parentId === root) {
                r.push(a);
            } else {
                o[a.parentId] = o[a.parentId] || {};
                o[a.parentId].children = o[a.parentId].children || [];
                o[a.parentId].children.push(a);
            }
        });
        return r;
    }(data, null);

console.log(tree);

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

Answer 4

是的。您可以在http://gijgo.com/tree/demos/bootstrap-treeview查看示例。单击“后端代码”选项卡，查看如何在 .NET 中使用 Linq 或 EF 来执行此操作