您的位置:首页 > Web前端 > JavaScript

Javascript解析JSON 输出为bootstrip可用的特定格式的数据

2015-09-21 20:30 661 查看
后台程序处理输出数据:

[{
"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.csdn.net/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.csdn.net/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 = {

cb99
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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息