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

Posted 2023-03-31

【中文标题】在javascript中将树从db格式转换为json格式

【英文标题】：transform tree from db format to json format in javascript

【发布时间】：2017-03-23 17:07:46

【问题描述】：

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

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":[]]]

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

【问题讨论】：

How to efficiently build a tree from a flat structure?的可能重复

请提供一些您到目前为止编写的代码。

也可以参考此链接了解更多问题，因为这可能会对您有所帮助。 ***.com/help/how-to-ask

【参考方案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,
        childrens: lookingForNodeWithParent( nodes, node.id )
      );
    
  
  
  return arrayToReturn;


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

【讨论】：

太好了。一个非常简单和优雅的解决方案。我也很欣赏变量的命名

【参考方案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);

【讨论】：

我认为这只会将当前节点与其父节点相关联。您还需要知道树的深度并为每个级别重复该代码以链接所有级别的树

如果每个节点都被添加到它的父子节点，那么如果有嵌套路径应该已经遵循。

【参考方案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; 

【讨论】：

如果我的输入数据中有多个 root(parentId == null)，它将不起作用。我使用一个输入数据对象进行了验证，该对象还包含亚太地区作为根对象，并附加了一些其他子对象。

但是谢谢你，我的意思是上面的例子100%有效。所以这也可以通过一些小的调整来解决问题

【参考方案4】：

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