Javascript解析JSON 输出为bootstrip可用的特定格式的数据_json 转成 bootstrap tree view 可用的数据 c#-优快云博客

本文链接：https://blog.youkuaiyun.com/phpfer/article/details/48632719

后台程序处理输出数据：

[{
	"childrenDeps": [{
		"childrenDeps": [{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "运营管理中心(2)",
			"description": null,
			"id": 3,
			"parentId": 2,
			"parentName": "集团总部"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "人力资源行政管理中心",
			"description": null,
			"id": 5,
			"parentId": 2,
			"parentName": "集团总部"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "战略发展中心",
			"description": null,
			"id": 10,
			"parentId": 2,
			"parentName": "集团总部"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "执行总裁办公室",
			"description": null,
			"id": 12,
			"parentId": 2,
			"parentName": "集团总部"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "法务中心",
			"description": null,
			"id": 14,
			"parentId": 2,
			"parentName": "集团总部"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "督察中心",
			"description": null,
			"id": 15,
			"parentId": 2,
			"parentName": "集团总部"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "财务中心 ",
			"description": null,
			"id": 30,
			"parentId": 2,
			"parentName": "集团总部"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "文化商业中心",
			"description": null,
			"id": 33,
			"parentId": 2,
			"parentName": "集团总部"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "品牌及资源管理",
			"description": null,
			"id": 34,
			"parentId": 2,
			"parentName": "集团总部"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "成本中心",
			"description": null,
			"id": 35,
			"parentId": 2,
			"parentName": "集团总部"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "建筑研究院",
			"description": null,
			"id": 36,
			"parentId": 2,
			"parentName": "集团总部"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "工会",
			"description": null,
			"id": 39,
			"parentId": 2,
			"parentName": "集团总部"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "总裁办",
			"description": null,
			"id": 41,
			"parentId": 2,
			"parentName": "集团总部"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "流程与信息管理中心",
			"description": null,
			"id": 43,
			"parentId": 2,
			"parentName": "集团总部"
		}],
		"deptCode": null,
		"deptLevel": 2,
		"deptName": "集团总部",
		"description": null,
		"id": 2,
		"parentId": 1,
		"parentName": "某某集团"
	},
	{
		"childrenDeps": [{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "酒店管理部",
			"description": null,
			"id": 11,
			"parentId": 4,
			"parentName": "某集团"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "办公室",
			"description": null,
			"id": 16,
			"parentId": 4,
			"parentName": "某集团"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "运营管理中心",
			"description": null,
			"id": 18,
			"parentId": 4,
			"parentName": "某集团"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "人力行政中心",
			"description": null,
			"id": 19,
			"parentId": 4,
			"parentName": "某集团"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "大山项目",
			"description": null,
			"id": 23,
			"parentId": 4,
			"parentName": "某集团"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "财务中心",
			"description": null,
			"id": 25,
			"parentId": 4,
			"parentName": "某集团"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "成本管理部",
			"description": null,
			"id": 26,
			"parentId": 4,
			"parentName": "某集团"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "设计管理部",
			"description": null,
			"id": 28,
			"parentId": 4,
			"parentName": "某集团"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "营销策划部",
			"description": null,
			"id": 37,
			"parentId": 4,
			"parentName": "某集团"
		}],
		"deptCode": null,
		"deptLevel": 2,
		"deptName": "某集团",
		"description": null,
		"id": 4,
		"parentId": 1,
		"parentName": "某某集团"
	},
	{
		"childrenDeps": [{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "旅游公司",
			"description": null,
			"id": 7,
			"parentId": 6,
			"parentName": "金苹果集团"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "金业公司",
			"description": null,
			"id": 17,
			"parentId": 6,
			"parentName": "金苹果集团"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "山水文化旅游公司",
			"description": null,
			"id": 20,
			"parentId": 6,
			"parentName": "金苹果集团"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "集团本部",
			"description": null,
			"id": 24,
			"parentId": 6,
			"parentName": "金苹果集团"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "国际公司",
			"description": null,
			"id": 29,
			"parentId": 6,
			"parentName": "金苹果集团"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "地产公司",
			"description": null,
			"id": 32,
			"parentId": 6,
			"parentName": "金苹果集团"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "农业公司 ",
			"description": null,
			"id": 40,
			"parentId": 6,
			"parentName": "金苹果集团"
		}],
		"deptCode": null,
		"deptLevel": 2,
		"deptName": "金苹果集团",
		"description": null,
		"id": 6,
		"parentId": 1,
		"parentName": "某某集团"
	},
	{
		"childrenDeps": [{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "特别公司",
			"description": null,
			"id": 9,
			"parentId": 8,
			"parentName": "某某某集团"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "小镇项目",
			"description": null,
			"id": 13,
			"parentId": 8,
			"parentName": "某某某集团"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "东方广场",
			"description": null,
			"id": 21,
			"parentId": 8,
			"parentName": "某某某集团"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "山东新态",
			"description": null,
			"id": 22,
			"parentId": 8,
			"parentName": "某某某集团"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "Aou公司",
			"description": null,
			"id": 31,
			"parentId": 8,
			"parentName": "某某某集团"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "高管",
			"description": null,
			"id": 38,
			"parentId": 8,
			"parentName": "某某某集团"
		},
		{
			"childrenDeps": null,
			"deptCode": null,
			"deptLevel": 3,
			"deptName": "山东凯青",
			"description": null,
			"id": 42,
			"parentId": 8,
			"parentName": "某某某集团"
		}],
		"deptCode": null,
		"deptLevel": 2,
		"deptName": "某某某集团",
		"description": null,
		"id": 8,
		"parentId": 1,
		"parentName": "某某集团"
	},
	{
		"childrenDeps": null,
		"deptCode": null,
		"deptLevel": 2,
		"deptName": "物业公司",
		"description": null,
		"id": 27,
		"parentId": 1,
		"parentName": "某某集团"
	}],
	"deptCode": null,
	"deptLevel": 1,
	"deptName": "某某集团",
	"description": null,
	"id": 1,
	"parentId": null,
	"parentName": null
}]

需要处理为这种格式的数据应用到Hjia框架（基于bootstrap的一种）里，

[
        {
            text: '父节点 1',
            href: '#parent1',
            tags: ['4'],
            nodes: [
                {
                    text: '子节点 1',
                    href: '#child1',
                    tags: ['2']
              },
                {
                    text: '子节点 2',
                    href: '#child2',
                    tags: ['0']
              }
            ]
          },
        {
            text: '父节点 2',
            href: '#parent2',
            tags: ['0']
          },
        {
            text: '父节点 3',
            href: '#parent3',
            tags: ['0']
          },
        {
            text: '父节点 4',
            href: '#parent4',
            tags: ['0']
          },
        {
            text: '父节点 5',
            href: '#parent5',
            tags: ['0']
          }
]

JS处理的方法：（这一段是学人家的，谢谢~ 看这里http://blog.youkuaiyun.com/tabris_k/article/details/47295241）

/**
 * @desc 将N级外来数据转化为bootstrap treeview可填充的数据
 * @param {Object} resp 需要被处理的数组
 * @param {Array} structure such as [{text: "menuGroupName", nodes: "menu"},{text: "menuName", nodes: "function"},{text: "functionName", nodes: "..."},...]
 * 但需要注意，structure内的元素必须是按层级从左向右依次下降的。
 */

loopLevel=0;
function obj2treeview(resp,structure){
	var nodeArray = new Array();
	var i = 0;
		for(i= 0;i<resp.length;i++){
			var treeViewNodeObj;
			var textStr = structure[loopLevel].text;
			var nodeStr = structure[loopLevel].nodes;
		
			var subNode;
			if(resp[i][nodeStr] != undefined){
				loopLevel++;
				subNode = obj2treeview(resp[i][nodeStr],structure);
				loopLevel--;
			}
			
			if(subNode != undefined){
				treeViewNodeObj = {
					text: resp[i][textStr],
					nodes: subNode
				};
			}else{
				treeViewNodeObj = {
					text: resp[i][textStr]
				};
			}
			nodeArray.push(treeViewNodeObj);
		}
//alert(nodeArray);
//console.log(nodeArray);
		return nodeArray;
}

也就是得有两参数，

一个是要处理成的数据结构：

//外来数据转化为treeView数据的转化结构
var columnStructure = [{text: "deptName", nodes: "childrenDeps"},{text: "deptName", nodes: "childrenDeps"},{text: "deptName", nodes: ""}];

一个是待处理的数组：

var t3='XXXXX'; 	//这里是最开始说的后台程序处理出来需要处理的数据内容，这里是为了模拟说明。
var resObj = eval(t3);  //转换为数组 参看：http://blog.youkuaiyun.com/lidongmao00/article/details/7785965

//执行JS方法 就转换完成了
console.log(obj2treeview(resObj,columnStructure));

//为了查看结果 把转换成的数据转换成JOSN格式
var endObj=obj2treeview(resObj,columnStructure);
var jsonText = JSON.stringify(endObj);  
alert(jsonText);
console.log(jsonText);

全部的样例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
</head>
<body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/**
 * @desc 将N级外来数据转化为bootstrap treeview可填充的数据
 * @param {Object} resp 需要被处理的数组
 * @param {Array} structure such as [{text: "menuGroupName", nodes: "menu"},{text: "menuName", nodes: "function"},{text: "functionName", nodes: "..."},...]
 * 但需要注意，structure内的元素必须是按层级从左向右依次下降的。
 */

loopLevel=0;
function obj2treeview(resp,structure){
	var nodeArray = new Array();
	var i = 0;
		for(i= 0;i<resp.length;i++){
			var treeViewNodeObj;
			var textStr = structure[loopLevel].text;
			var idStr = structure[loopLevel].id;
			var nodeStr = structure[loopLevel].nodes;
		
			var subNode;
			if(resp[i][nodeStr] != undefined){
				loopLevel++;
				subNode = obj2treeview(resp[i][nodeStr],structure);
				loopLevel--;
			}
			
			if(subNode != undefined){
				treeViewNodeObj = {
					text: resp[i][textStr],
					id: resp[i][idStr],
					nodes: subNode
				};
			}else{
				treeViewNodeObj = {
					text: resp[i][textStr],
					id: resp[i][idStr]
				};
			}
			nodeArray.push(treeViewNodeObj);
		}
//alert(nodeArray);
//console.log(nodeArray);
		return nodeArray;
}

//外来数据转化为treeView数据的转化结构
var columnStructure = [{text: "deptName",id: "id", nodes: "childrenDeps"},{text: "deptName", id: "id",nodes: "childrenDeps"},{text: "deptName",id: "id", nodes: ""}];	
//将外来数据转化为treeview数据
//$scope.columnsTree = obj2treeview(response,columnStructure);

var t3='[{"childrenDeps":[{"childrenDeps":[{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"运营管理中心(2)","description":null,"id":3,"parentId":2,"parentName":"集团总部"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"人力资源行政管理中心","description":null,"id":5,"parentId":2,"parentName":"集团总部"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"战略发展中心","description":null,"id":10,"parentId":2,"parentName":"集团总部"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"执行总裁办公室","description":null,"id":12,"parentId":2,"parentName":"集团总部"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"法务中心","description":null,"id":14,"parentId":2,"parentName":"集团总部"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"督察中心","description":null,"id":15,"parentId":2,"parentName":"集团总部"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"财务中心 ","description":null,"id":30,"parentId":2,"parentName":"集团总部"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"文化商业中心","description":null,"id":33,"parentId":2,"parentName":"集团总部"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"品牌及资源管理","description":null,"id":34,"parentId":2,"parentName":"集团总部"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"成本中心","description":null,"id":35,"parentId":2,"parentName":"集团总部"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"建筑研究院","description":null,"id":36,"parentId":2,"parentName":"集团总部"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"工会","description":null,"id":39,"parentId":2,"parentName":"集团总部"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"总裁办","description":null,"id":41,"parentId":2,"parentName":"集团总部"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"流程与信息管理中心","description":null,"id":43,"parentId":2,"parentName":"集团总部"}],"deptCode":null,"deptLevel":2,"deptName":"集团总部","description":null,"id":2,"parentId":1,"parentName":"某某集团"},{"childrenDeps":[{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"酒店管理部","description":null,"id":11,"parentId":4,"parentName":"某集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"办公室","description":null,"id":16,"parentId":4,"parentName":"某集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"运营管理中心","description":null,"id":18,"parentId":4,"parentName":"某集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"人力行政中心","description":null,"id":19,"parentId":4,"parentName":"某集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"大山项目","description":null,"id":23,"parentId":4,"parentName":"某集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"财务中心","description":null,"id":25,"parentId":4,"parentName":"某集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"成本管理部","description":null,"id":26,"parentId":4,"parentName":"某集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"设计管理部","description":null,"id":28,"parentId":4,"parentName":"某集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"营销策划部","description":null,"id":37,"parentId":4,"parentName":"某集团"}],"deptCode":null,"deptLevel":2,"deptName":"某集团","description":null,"id":4,"parentId":1,"parentName":"某某集团"},{"childrenDeps":[{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"旅游公司","description":null,"id":7,"parentId":6,"parentName":"金苹果集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"金业公司","description":null,"id":17,"parentId":6,"parentName":"金苹果集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"山水文化旅游公司","description":null,"id":20,"parentId":6,"parentName":"金苹果集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"集团本部","description":null,"id":24,"parentId":6,"parentName":"金苹果集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"国际公司","description":null,"id":29,"parentId":6,"parentName":"金苹果集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"地产公司","description":null,"id":32,"parentId":6,"parentName":"金苹果集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"农业公司 ","description":null,"id":40,"parentId":6,"parentName":"金苹果集团"}],"deptCode":null,"deptLevel":2,"deptName":"金苹果集团","description":null,"id":6,"parentId":1,"parentName":"某某集团"},{"childrenDeps":[{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"特别公司","description":null,"id":9,"parentId":8,"parentName":"某某某集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"小镇项目","description":null,"id":13,"parentId":8,"parentName":"某某某集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"东方广场","description":null,"id":21,"parentId":8,"parentName":"某某某集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"山东新态","description":null,"id":22,"parentId":8,"parentName":"某某某集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"Aou公司","description":null,"id":31,"parentId":8,"parentName":"某某某集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"高管","description":null,"id":38,"parentId":8,"parentName":"某某某集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":3,"deptName":"山东凯青","description":null,"id":42,"parentId":8,"parentName":"某某某集团"}],"deptCode":null,"deptLevel":2,"deptName":"某某某集团","description":null,"id":8,"parentId":1,"parentName":"某某集团"},{"childrenDeps":null,"deptCode":null,"deptLevel":2,"deptName":"物业公司","description":null,"id":27,"parentId":1,"parentName":"某某集团"}],"deptCode":null,"deptLevel":1,"deptName":"某某集团","description":null,"id":1,"parentId":null,"parentName":null}]';
var resObj = eval(t3);  

var endObj=obj2treeview(resObj,columnStructure);
var jsonText = JSON.stringify(endObj);  
alert(jsonText);
console.log(jsonText);

$(document).ready(function() {
	$('code').html(jsonText);
});
</script>
</head>
<body>
<span style="white-space:pre">	</span><code>
<span style="white-space:pre">	</span></code>
</body>
</html>