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

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

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

开发环境：Atom;

语言：javascript;

其他：nodejs;mysql;express;

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

 1 [
 2     {
 3         "id": 1,
 4         "name": "111",
 5         "parent": null,
 6         "icon": "555,,"
 7     },
 8     {
 9         "id": 2,
10         "name": "极地测试菜单2",
11         "parent": 1,
12         "icon": "/img/002.png"
13     },
14     {
15         "id": 4,
16         "name": "555",
17         "parent": 2,
18         "icon": "88"
19     },
20     {
21         "id": 5,
22         "name": "ddd",
23         "parent": 2,
24         "icon": "555.png"
25     },
26     {
27         "id": 6,
28         "name": "666",
29         "parent": 4,
30         "icon": null
31     },
32     {
33         "id": 7,
34         "name": "777",
35         "parent": 5,
36         "icon": null
37     },
38     {
39         "id": 9,
40         "name": "8888",
41         "parent": 1,
42         "icon": null
43     },
44     {
45         "id": 10,
46         "name": "9999",
47         "parent": 9,
48         "icon": null
49     },
50     {
51         "id": 11,
52         "name": "10000",
53         "parent": 1,
54         "icon": null
55     }
56 ]

输出：树状JSON结构

 1 {
 2     "id": 1,
 3     "name": "111",
 4     "parent": null,
 5     "icon": "555,,",
 6     "sub": [
 7         {
 8             "id": 2,
 9             "name": "极地测试菜单2",
10             "parent": 1,
11             "icon": "/img/002.png",
12             "sub": [
13                 {
14                     "id": 4,
15                     "name": "555",
16                     "parent": 2,
17                     "icon": "88",
18                     "sub": [
19                         {
20                             "id": 6,
21                             "name": "666",
22                             "parent": 4,
23                             "icon": null,
24                             "sub": []
25                         }
26                     ]
27                 },
28                 {
29                     "id": 5,
30                     "name": "ddd",
31                     "parent": 2,
32                     "icon": "555.png",
33                     "sub": [
34                         {
35                             "id": 7,
36                             "name": "777",
37                             "parent": 5,
38                             "icon": null,
39                             "sub": []
40                         }
41                     ]
42                 }
43             ]
44         },
45         {
46             "id": 9,
47             "name": "8888",
48             "parent": 1,
49             "icon": null,
50             "sub": [
51                 {
52                     "id": 10,
53                     "name": "9999",
54                     "parent": 9,
55                     "icon": null,
56                     "sub": []
57                 }
58             ]
59         },
60         {
61             "id": 11,
62             "name": "10000",
63             "parent": 1,
64             "icon": null,
65             "sub": []
66         }
67     ]
68 }

即将从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对象

代码：

 1 router.get('/:id', function(req, res, next) {
 2 
 3 
 4   pool.getConnection(function(err, connection) {
 5     if (err) return next(err);
 6 
 7       connection.query('SELECT * from menuitems ', function(err, rows, fields) {
 8         if (err) throw err;
 9         //get all data
10         var result = [];//存放起始对象
11         var allMenu = rows;//获取sql出的全部json对象
12         for(i=0;i<allMenu.length;i++){
13           if(allMenu[i].id == req.params.id){
14             result.push(allMenu[i]) ;//根据id号获取根对象
15             break;
16           }
17         }
18        //judege result exist or not
19         if(result.length==0){
20 
21            return res.json('Failed! id is not exist!');
22 
23         }else{
24 
25           result.sub=[];
26           result.sub=getAllChild(result);//调用
27           res.json(result[0]);
28 
29         }
30         //find some item all child
31         function findItemChild(item){
32           var arrayList=[];
33           for(var i in allMenu){
34             if(allMenu[i].parent == item.id){
35               arrayList.push(allMenu[i]);
36             }
37           }
38           return arrayList;
39         }
40         //get all child
41         function getAllChild(array){
42           var childList=findItemChild(array[0]);
43           if(childList == null){
44             return [];
45           }
46           else{
47             for(var j in childList){
48               childList[j].sub=[];
49               childList[j].sub=getAllChild([childList[j]]);
50             }
51             array[0].sub=childList;
52           }
53           return childList;
54 
55         }
56       });
57   });
58 });

代码执行过程：

　　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数据构成的森林。思想是通过给森林构造一个根节点转换为树，再利用上述方法实现。

 1 router.get('/', function(req, res, next) {
 2 
 3   pool.getConnection(function(err, connection) {
 4     if (err) return next(err);
 5     connection.query('SELECT * from menuitems ', function(err, rows, fields) {
 6       if (err) throw err;
 7       //get all data
 8       //create a id= null root for forest
 9       var temp_parent={"id":null,"sub":[]};//新建id为null的对象做为森林的根
10       var result=[];
11       var allMenu = rows;
12 
13        result.push(temp_parent) ;
14 
15       var output = getAllChild(result);
16       if(output.length==0){
17         //if our database do note have any data
18         return res.json('Failed! do not have any data!');
19       }else {
20         res.json(output);
21       }
22 
23       //find some item all child   //方便阅读依然放上此方法
24       function findItemChild(item){
25         var arrayList=[];
26         for(var i in allMenu){
27           if(allMenu[i].parent == item.id){
28             arrayList.push(allMenu[i]);
29           }
30         }
31         return arrayList;
32       }
33       //get all child          //方便阅读依然放上此方法
34       function getAllChild(array){   
35         var childList=findItemChild(array[0]);
36         if(childList == null){
37           return [];
38         }
39         else{
40           for(var j in childList){
41             childList[j].sub=[];
42             childList[j].sub=getAllChild([childList[j]]);
43           }
44           array[0].sub=childList;
45         }
46         return childList;
47 
48       }
49 
50       });
51 
52 });
53 });