怎么将json字符串转换成树结构

cyyjm 2019-07-16 09:22:22
我有这样格式的json结构，想按照json内的type的值，自动归类生成一个树结构。如下图所示：





<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

   <script type="text/javascript">

    var initData = [

{"dataId":"21","parentid":"2","name":"A厂","type":"水厂","labelName":"A厂","address":"霞山区椹川大道18号","coordinate":"110.482912,21.252413"},

{"dataId":"31","parentid":"3","name":"B厂","type":"水厂","labelName":"B厂","address":"霞山区椹川大道19号","coordinate":"110.482912,21.262414"},

{"dataId":"32","parentid":"3","name":"C厂","type":"水厂","labelName":"C厂","address":"霞山区椹川大道20号","coordinate":"110.482912,21.272415"},

{"dataId":"51","parentid":"5","name":"A抽水站","type":"抽水站","labelName":"A抽水站","address":"霞山区椹川大道21号","coordinate":"110.482912,21.282416"},

{"dataId":"91","parentid":"9","name":"D厂","type":"污水厂","labelName":"D厂","address":"霞山区椹川大道22号","coordinate":"110.482912,21.292417"},

{"dataId":"111","parentid":"11","name":"E厂","type":"水厂","labelName":"E厂","address":"霞山区椹川大道23号","coordinate":"110.482912,21.302418"},

{"dataId":"112","parentid":"11","name":"F厂","type":"水厂","labelName":"F厂","address":"霞山区椹川大道24号","coordinate":"110.482912,21.312418"},

{"dataId":"113","parentid":"11","name":"G厂","type":"水厂","labelName":"G厂","address":"霞山区椹川大道25号","coordinate":"110.482912,21.322418"},

{"dataId":"114","parentid":"11","name":"H厂","type":"水厂","labelName":"H厂","address":"霞山区椹川大道26号","coordinate":"110.482912,21.332418"},

{"dataId":"115","parentid":"11","name":"I厂","type":"水厂","labelName":"I厂","address":"霞山区椹川大道27号","coordinate":"110.482912,21.342418"},

{"dataId":"121","parentid":"12","name":"J厂","type":"水厂","labelName":"J厂","address":"霞山区椹川大道28号","coordinate":"110.482912,21.352418"},

{"dataId":"122","parentid":"12","name":"K厂","type":"水厂","labelName":"K厂","address":"霞山区椹川大道29号","coordinate":"110.482912,21.362418"},

{"dataId":"123","parentid":"12","name":"L厂","type":"水厂","labelName":"L厂","address":"霞山区椹川大道30号","coordinate":"110.482912,21.372418"},

{"dataId":"124","parentid":"12","name":"M厂","type":"水厂","labelName":"M厂","address":"霞山区椹川大道31号","coordinate":"110.482912,21.382418"},

{"dataId":"131","parentid":"13","name":"N厂","type":"水厂","labelName":"N厂","address":"霞山区椹川大道32号","coordinate":"110.482912,21.392418"},

{"dataId":"D1117","parentid":"111","name":"A调度","type":"调度监测","labelName":"A调度","address":"霞山区椹川大道33号","coordinate":"110.482912,21.402428"},

{"dataId":"D1126","parentid":"112","name":"B调度","type":"调度监测","labelName":"B调度","address":"霞山区椹川大道34号","coordinate":"110.482912,21.412429"},

{"dataId":"D1211","parentid":"121","name":"A加压站","type":"加压站","labelName":"A加压站","address":"霞山区椹川大道35号","coordinate":"110.482912,21.422430"},

{"dataId":"D1212","parentid":"121","name":"B加压站","type":"加压站","labelName":"B加压站","address":"霞山区椹川大道36号","coordinate":"110.482912,21.432431"},

{"dataId":"D1213","parentid":"121","name":"C调度","type":"调度监测","labelName":"C调度","address":"霞山区椹川大道37号","coordinate":"110.482912,21.442432"},

{"dataId":"D1224","parentid":"122","name":"D调度","type":"调度监测","labelName":"D调度","address":"霞山区椹川大道38号","coordinate":"110.482912,21.452433"},

{"dataId":"D1234","parentid":"123","name":"C加压站","type":"加压站","labelName":"C加压站","address":"霞山区椹川大道39号","coordinate":"110.482912,21.462434"},

{"dataId":"D1235","parentid":"123","name":"E调度","type":"调度监测","labelName":"E调度","address":"霞山区椹川大道40号","coordinate":"110.482912,21.472435"},

{"dataId":"D8101","parentid":"81","name":"A二次加压","type":"二次加压","labelName":"A二次加压","address":"霞山区椹川大道41号","coordinate":"110.482912,21.482436"}

];

    </script>

 </head>

 <body>

    <table border='0' width='100%' bgcolor="#ffffff" style="border:1px solid gray;font-size:14px;" >

		<tr>

			<td height="30px"></td>

			<td align="left"><b>测压点：</td>

			<td align="left"><b><span id="cyd"></span> 个</td>

		</tr>

		<tr>

			<td height="30px"></td>

			<td align="left"><b>抽水站：</td>

			<td align="left"><b><span id="csz"></span> 个</td>

		</tr>

		<tr>

			<td height="30px"></td>

			<td align="left"><b>二次加压：</td>

			<td align="left"><b><span id="ecjy"></span> 个</td>

		</tr>

		<tr>

			<td height="30px"></td>

			<td align="left"><b>加压站：</td>

			<td align="left"><b><span id="jyz"></span> 个</td>

		</tr>

		<tr>

			<td height="30px"></td>

			<td align="left"><b>调度监测：</td>

			<td align="left"><b><span id="ddjc"></span> 个</td>

		</tr>

		<tr>

			<td height="30px"></td>

			<td align="left"><b>流量点：</td>

			<td align="left"><b><span id="lld"></span> 个</td>

		</tr>

		<tr>

			<td height="30px"></td>

			<td align="left"><b>水厂：</td>

			<td align="left"><b><span id="sc"></span> 个</td>

		</tr>

		<tr>

			<td colspan="3"><hr width="100%"></td>

		</tr>

		<tr>

			<td height="30px"></td>

			<td align="left"><b>合　　计：</td>

			<td align="left"><b><span id="all"></span> 个</td>

		</tr>

	</table>

 </body>

</html>
...全文
169 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
自渡96 2019-07-16
  • 打赏
  • 举报
 回复
data代表的是上面的那个数组对象，data改成nodes
cyyjm 2019-07-16
  • 打赏
  • 举报
 回复
引用 1 楼 自渡96 的回复:
参考下这个

var nodes = [  
    {"id":2,"cname":"第一级1","ipid":0,"ccode":"1"},  
    {"id":3,"cname":"第一级1","ipid":2,"ccode":"1"},  
    {"id":4,"cname":"第一级1","ipid":2,"ccode":"1"},  
    {"id":5,"cname":"第一级1","ipid":4,"ccode":"1"},  
    {"id":6,"cname":"第一级1","ipid":3,"ccode":"1"},  
    {"id":7,"cname":"第一级1","ipid":0,"ccode":"1"}  
]         
function transDate(list,idstr,pidstr){  
    var list = JSON.parse(JSON.stringify(data)); //数组深拷贝，否则会改变被传入参数的值
    var result = [],temp = {};  
    for(i = 0; i < list.length; i++){  
        temp[list[i][idstr]]=list[i];//将nodes数组转成对象类型  
    }  
    for(j=0; j<list.length; j++){  
        tempVp = temp[list[j][pidstr]]; //获取每一个子对象的父对象  
        if(tempVp){//判断父对象是否存在，如果不存在直接将对象放到第一层  
            if(!tempVp["nodes"]) tempVp["nodes"] = [];//如果父元素的nodes对象不存在，则创建数组  
            tempVp["nodes"].push(list[j]);//将本对象压入父对象的nodes数组  
        }else{  
            result.push(list[j]);//将不存在父对象的对象直接放入一级目录  
        }  
    }  
    return result;  
} 
console.log(transDate(nodes,"id","ipid")); //传入的值 列表 ，本对象的id，父对象的id  
document.write(JSON.stringify(transDate(nodes,"id","ipid")));
data is not defined
自渡96 2019-07-16
  • 打赏
  • 举报
 回复
参考下这个

var nodes = [  
    {"id":2,"cname":"第一级1","ipid":0,"ccode":"1"},  
    {"id":3,"cname":"第一级1","ipid":2,"ccode":"1"},  
    {"id":4,"cname":"第一级1","ipid":2,"ccode":"1"},  
    {"id":5,"cname":"第一级1","ipid":4,"ccode":"1"},  
    {"id":6,"cname":"第一级1","ipid":3,"ccode":"1"},  
    {"id":7,"cname":"第一级1","ipid":0,"ccode":"1"}  
]         
function transDate(list,idstr,pidstr){  
    var list = JSON.parse(JSON.stringify(data)); //数组深拷贝，否则会改变被传入参数的值
    var result = [],temp = {};  
    for(i = 0; i < list.length; i++){  
        temp[list[i][idstr]]=list[i];//将nodes数组转成对象类型  
    }  
    for(j=0; j<list.length; j++){  
        tempVp = temp[list[j][pidstr]]; //获取每一个子对象的父对象  
        if(tempVp){//判断父对象是否存在，如果不存在直接将对象放到第一层  
            if(!tempVp["nodes"]) tempVp["nodes"] = [];//如果父元素的nodes对象不存在，则创建数组  
            tempVp["nodes"].push(list[j]);//将本对象压入父对象的nodes数组  
        }else{  
            result.push(list[j]);//将不存在父对象的对象直接放入一级目录  
        }  
    }  
    return result;  
} 
console.log(transDate(nodes,"id","ipid")); //传入的值 列表 ，本对象的id，父对象的id  
document.write(JSON.stringify(transDate(nodes,"id","ipid")));
JAVA后台转换成树结构数据返回给前端的实现方法
主要介绍了JAVA后台转换成树结构数据返回给前端的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
curly.js:将带有缩进的文本转换为树层次结构
curl.js将文本转换为树层次结构。 每行的缩进级别（每行前的空格）用作树中节点的深度。 此插件最初是作为的前半部分创建的， 是一种模板引擎，可通过带缩进的文本创建HTML元素。 使用curl.js ，此输入： curly ...
数据结构基础系列(7)：图
数据结构课程是计算机类专业的专业基础课程，在IT人才培养中，起着重要的...系列课程包含11个部分，本课为第7部分“图”，介绍图的相关概念图的存储结构和基本运算，深度优先和广度优先的遍历以及小生成树等其他运算。
通过ObjectMapper和JsonNode 把JSON字符串转换成树结构数据和获取树节点数据
通过ObjectMapper和JsonNode 把JSON字符串转换成树结构数据和获取树节点数据
前端获取json字符串转换为树状结构
前端获取json字符串转换为树状结构
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章