Javascript 如何从JSON数据创建树结构_Javascript_Json_Tree_Treeview

Javascript 如何从JSON数据创建树结构

javascript json tree

Javascript 如何从JSON数据创建树结构,javascript,json,tree,treeview,Javascript,Json,Tree,Treeview,我有一个JSON列表，如下所示： var arr=[ { "text":"text1", "id" :"1", //no parent id }, { "text":"text2", "id" :"2", "idParent":"1" }, { "text":"text3", "id" :"3", "idParent":"2" }, { "text":"text4", "id

我有一个JSON列表，如下所示：

var arr=[
{
     "text":"text1",
     "id"  :"1",
     //no parent id
 },
{
     "text":"text2",
     "id"  :"2",
     "idParent":"1"
 },
{
     "text":"text3",
     "id"  :"3",
     "idParent":"2"
 },
{
     "text":"text4",
     "id"  :"4",
     "idParent":"1"
 },
{
     "text":"text5",
     "id"  :"5",
      //no parent id
 },
];

我需要在层次结构树中转换该列表，如下所示：

var arr = [
  {
    "text": "Parent 1",
    "id"  : "1",
    "nodes": [
      {
        "text": "Child 1",
        "id"  : "2",
        "parentid"  : "1",
        "nodes": [
          {
            "text": "Grandchild 1",
            "id"  : "4",
            "parentid"  : "2",
          },
          {
            "text": "Grandchild 2",
             "id"  : "8",
            "parentid"  : "2",
          }
        ]
      },
      {
        "text": "Child 2",
        "id"  : "10",
        "parentid"  : "1",
      }
    ]
  },
  {
    "text": "Parent 2",
    "id"  : "19",
    //no parent id
  }
];

只有根父级没有parentid元素

？我如何在Javascript中实现这一点

提前感谢您的帮助。

我在这里使用了一个对象作为映射，否则您必须遍历所有数组元素以搜索节点的ID，删除元素也更容易。toString函数就在那里，因为映射的键必须是字符串

// we use a map for search for the nodes by their ids
var nodes_map = {};

// we copy all the elements into the map, where the keys are the ids of the nodes
for ( var i=0; i<arr.length; ++i )
{
    // create nodes array for each node
    arr[ i ].nodes = [];

    // copy into the map
    nodes_map[ arr[i].id.toSting() ] = arr[ i ];
}    

// we iterate through all nodes, and add them into their parent's node array
for ( var key in nodes_map )
{
    // current node
    var node = nodes_map[ key ];

    // if the current node have idParent property, and the parent exists in the map
    if ( "idParent" in node && node.idParent.toSting() in nodes_map )
    {
        // we add the current node to the parent's nodes array 
        nodes_map[ node.idParent.toSting() ].nodes.push( node );
    }
}

// we remove all the nodes from the map, that has parents
for ( var key in nodes_map )
{
    // current node
    var node = nodes_map[ key ];

    // if it has idParent property
    if ( "idParent" in node )
    {
        // we remove from the map
        delete nodes_map[ key ];
    }
}    

// results array
var new_arr = [];
// copy back the nodes from the map into an array
for ( var key in nodes_map )
{
    new_arr.push( nodes_map[ key ] );
}

我在这里使用了一个对象作为映射，否则必须遍历所有数组元素来搜索节点的ID，删除元素也更容易。toString函数就在那里，因为映射的键必须是字符串

// we use a map for search for the nodes by their ids
var nodes_map = {};

// we copy all the elements into the map, where the keys are the ids of the nodes
for ( var i=0; i<arr.length; ++i )
{
    // create nodes array for each node
    arr[ i ].nodes = [];

    // copy into the map
    nodes_map[ arr[i].id.toSting() ] = arr[ i ];
}    

// we iterate through all nodes, and add them into their parent's node array
for ( var key in nodes_map )
{
    // current node
    var node = nodes_map[ key ];

    // if the current node have idParent property, and the parent exists in the map
    if ( "idParent" in node && node.idParent.toSting() in nodes_map )
    {
        // we add the current node to the parent's nodes array 
        nodes_map[ node.idParent.toSting() ].nodes.push( node );
    }
}

// we remove all the nodes from the map, that has parents
for ( var key in nodes_map )
{
    // current node
    var node = nodes_map[ key ];

    // if it has idParent property
    if ( "idParent" in node )
    {
        // we remove from the map
        delete nodes_map[ key ];
    }
}    

// results array
var new_arr = [];
// copy back the nodes from the map into an array
for ( var key in nodes_map )
{
    new_arr.push( nodes_map[ key ] );
}

无序节点的解决方案

var arr=[ {text:text3，id:3，parentId:2}， {text:text2，id:2，parentId:1}， {text:text4，id:4，parentId:1}， {text:text1，id:1，/*没有父id*/}， {text:text5，id:5，/*没有父id*/} ], 数据=arr.reducefunction r，a{ 函数getParents，b{ 返回b.id==a.parentId？b:b.nodes&&b.nodes.reducegetParent，s； } var指数=0，节点；如果在{ node=r.reducegetParent，{}； } if node&&Object.keysnode.length{ node.nodes=node.nodes | |[]； node.nodes.pusha； }否则{ 而指数文件。书写无序节点的解决方案