Javascript解析JSON 输出为bootstrip可用的特定格式的数据
2015-09-21 20:30
661 查看
后台程序处理输出数据:
需要处理为这种格式的数据应用到Hjia框架(基于bootstrap的一种)里,
JS处理的方法:(这一段是学人家的,谢谢~ 看这里http://blog.csdn.net/tabris_k/article/details/47295241)
也就是得有两参数,
一个是要处理成的数据结构:
一个是待处理的数组:
全部的样例:
[{ "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>
相关文章推荐
- 【web前端】js json转数组,数组转json,字符串转数字
- iOS字典或数组转JSON
- 前台数据数组转化为json数据
- PHP实现数组转JSon和JSon转数组的方法示例
- Javascript事件绑定及深入
- js -- use strict
- JSP中的隐含对象
- jsp中的page指令(属性)
- 通过Gson解析Json数据
- jsp 乱码处理方法
- javascript中的运算符
- 0920 JSON数据 蓝懿
- 通过js检测到iframe,使父窗口重定向到index -----------???----------------------
- Easeljs 小试
- js数组的迭代器方法(some、every、forEach、map、filter)
- javaScript基础
- JS中some(),every(),forEach(),map(),filter()区别
- ExtJS Combobox 如何设置默认和取值问题
- 【学习笔记javascript设计模式与开发实践----1】
- jstl_XML标签库