菜鸟笔记：node.js+mysql中将JSON数据构建为树（递归制作树状菜单数据接口）

初学Web端开发，今天是第一次将所学做随笔记录，肯定存在多处欠妥，望大家海涵；若有不足，望大家批评指正。

进实验室后分配到的第一个项目，需要制作一个不确定层级树形菜单的数据接口，对于从来没实战编过程的我，存在太多需要学习的地方。

开发环境：Atom;

语言：javascript;

其他：nodejs;mysql;express;

输入：通过sql语句转换出的一个个JSON对象，如：其中id为唯一编号，parent为其父级的id号。

 [
     {
         "id": 1,
         "name": "111",
         "parent": null,
         "icon": "555,,"
     },
     {
         "id": 2,
         "name": "极地测试菜单2",
         "parent": 1,
         "icon": "/img/002.png"
     },
     {
         "id": 4,
         "name": "555",
         "parent": 2,
         "icon": "88"
     },
     {
         "id": 5,
         "name": "ddd",
         "parent": 2,
         "icon": "555.png"
     },
     {
         "id": 6,
         "name": "666",
         "parent": 4,
         "icon": null
     },
     {
         "id": 7,
         "name": "777",
         "parent": 5,
         "icon": null
     },
     {
         "id": 9,
         "name": "8888",
         "parent": 1,
         "icon": null
     },
     {
         "id": 10,
         "name": "9999",
         "parent": 9,
         "icon": null
     },
     {
         "id": 11,
         "name": "10000",
         "parent": 1,
         "icon": null
     }
 ]

输出：树状JSON结构

 {
     "id": 1,
     "name": "111",
     "parent": null,
     "icon": "555,,",
     "sub": [
         {
             "id": 2,
             "name": "极地测试菜单2",
             "parent": 1,
             "icon": "/img/002.png",
             "sub": [
                 {
                     "id": 4,
                     "name": "555",
                     "parent": 2,
                     "icon": "88",
                     "sub": [
                         {
                             "id": 6,
                             "name": "666",
                             "parent": 4,
                             "icon": null,
                             "sub": []
                         }
                     ]
                 },
                 {
                     "id": 5,
                     "name": "ddd",
                     "parent": 2,
                     "icon": "555.png",
                     "sub": [
                         {
                             "id": 7,
                             "name": "777",
                             "parent": 5,
                             "icon": null,
                             "sub": []
                         }
                     ]
                 }
             ]
         },
         {
             "id": 9,
             "name": "8888",
             "parent": 1,
             "icon": null,
             "sub": [
                 {
                     "id": 10,
                     "name": "9999",
                     "parent": 9,
                     "icon": null,
                     "sub": []
                 }
             ]
         },
         {
             "id": 11,
             "name": "10000",
             "parent": 1,
             "icon": null,
             "sub": []
         }
     ]
 }

即将从mysql中取出的一条一条JSON数据，按照parent所指向的id号，转变为树桩JSON结构，供AngularJS框架自动生成树桩菜单。

示例图：

变量声明：allMenu为初始输入的JSON数据格式，即包含一条一条JSON对象的数组。

　　　　   对象的sub属性放置当前对象的所有子节点数组。

思想：利用递归/循环进行树的层级遍历。

　　　比如输入一个根节点对象，首先应对allMenu遍历寻找parent为根节点id的所有对象（方法命名为findItemChild），并将其置入一个临时数组childlist中。然后对该childlist进行遍历，对其中每一个对象利用递归方法，返回该对象的childList并添加进当前对象的sub中，往复递归。举个例子：即当方法输入id=1的对象后，findItemChild方法通过遍历会返回一个数组[{id:2,parent:1,...},{id:9,parent:1,...},{id:11,parent:1,...}]，之后对该数组进行遍历，即将id=2的对象递归输入方法，并将获取的childlist遍历继续递归。。。。即树的层级遍历。

算法：

　　输入：JSON对象item

　　function getAllChild(res){

　　①获取所有父级为根节点id的子对象数组childlist

　　②若childlist为空，则返回[]

　　③若childlist不为空，遍历childlist，并对每一个childlist[k]递归调用getAllChild(childlist[k])赋予childlist[k].sub

　　④将childlist输入res.sub

　　⑤返回childlist

　　}

输出：以对象item为根节点的树状JSON对象

代码：

 router.get('/:id', function(req, res, next) {

   pool.getConnection(function(err, connection) {
     if (err) return next(err);

       connection.query('SELECT * from menuitems ', function(err, rows, fields) {
         if (err) throw err;
         //get all data
         var result = [];//存放起始对象
         var allMenu = rows;//获取sql出的全部json对象
         for(i=0;i<allMenu.length;i++){
           if(allMenu[i].id == req.params.id){
             result.push(allMenu[i]) ;//根据id号获取根对象
             break;
           }
         }
        //judege result exist or not
         if(result.length==0){

            return res.json('Failed! id is not exist!');

         }else{

           result.sub=[];
           result.sub=getAllChild(result);//调用
           res.json(result[0]);

         }
         //find some item all child
         function findItemChild(item){
           var arrayList=[];
           for(var i in allMenu){
             if(allMenu[i].parent == item.id){
               arrayList.push(allMenu[i]);
             }
           }
           return arrayList;
         }
         //get all child
         function getAllChild(array){
           var childList=findItemChild(array[0]);
           if(childList == null){
             return [];
           }
           else{
             for(var j in childList){
               childList[j].sub=[];
               childList[j].sub=getAllChild([childList[j]]);
             }
             array[0].sub=childList;
           }
           return childList;

         }
       });
   });
 });

代码执行过程：

　　getAllChild([id=1])

　　childlist=[{id:2,parent:1,...},{id:9,parent:1,...},{id:11,parent:1,...}];

for(id=2          id=9           id=11)

　          ↓

　　childlist[id=2].sub=?

↓

getAllChild([id=2]);

　　　　　　　　　      　childlist=[{id:4,parent:2,...},{id:5,parent:2,...}];

　　　　　　　　　　　    for（id=4       id=5）

↓

　　                                  childlist[id=4].sub=?

↓

　　　　　　　　　　　　　　　　　　　　         getAllChild([id=4]);

　　　　　　　　　      　　　　　　　　　　　　　childlist=[{id:6,parent:4,...}];

　　　　　　　　                                                          for（id=6）

↓

　　                                                                                childlist[id=6].sub=?

↓

getAllChild([id=6]),return [];//到底，依次往上返回，将childlist逐步扩充，直到最终返回allchild；

扩充：返回所有树状菜单，即寻找所有JSON数据构成的森林。思想是通过给森林构造一个根节点转换为树，再利用上述方法实现。

　　

 router.get('/', function(req, res, next) {

   pool.getConnection(function(err, connection) {
     if (err) return next(err);
     connection.query('SELECT * from menuitems ', function(err, rows, fields) {
       if (err) throw err;
       //get all data
       //create a id= null root for forest
       var temp_parent={"id":null,"sub":[]};//新建id为null的对象做为森林的根
       var result=[];
       var allMenu = rows;

        result.push(temp_parent) ;

       var output = getAllChild(result);
       if(output.length==0){
         //if our database do note have any data
         return res.json('Failed! do not have any data!');
       }else {
         res.json(output);
       }

       //find some item all child   //方便阅读依然放上此方法
       function findItemChild(item){
         var arrayList=[];
         for(var i in allMenu){
           if(allMenu[i].parent == item.id){
             arrayList.push(allMenu[i]);
           }
         }
         return arrayList;
       }
       //get all child          //方便阅读依然放上此方法
       function getAllChild(array){
         var childList=findItemChild(array[0]);
         if(childList == null){
           return [];
         }
         else{
           for(var j in childList){
             childList[j].sub=[];
             childList[j].sub=getAllChild([childList[j]]);
           }
           array[0].sub=childList;
         }
         return childList;

       }

       });

 });
 });

总结：通过javascript语言利用NodeJS结合mysql可以实现从后台拿到JSON数据后，将数据构造成树状结构的形式供前端使用。这种Javascript全栈开发方式还有很多需要学习。未来的路还很长，加油！

递归的写法需要时常琢磨寻找好的返回方式，在本文的思想下，递归方法的输入与返回的形式应统一，防止程序陷入死循环或不可执行，实在无法下手时应该通过画流程图的形式判断递归的有效性。递归在树层级比较深时肯定会耗费大量计算时间，因此之后通过学习寻找更好的解决方法。

tips:由于本人菜鸟一枚，所述拙见仅供自己学习总结，第一次写博客~若对您造成错误影响请批评指正。