json转树状结构(js)

转自: http://rockyuse.iteye.com/blog/1541308

/** 
 * json格式转树状结构 
 * @param   {json}      json数据 
 * @param   {String}    id的字符串 
 * @param   {String}    父id的字符串 
 * @param   {String}    children的字符串 
 * @return  {Array}     数组 
 */  
function transData(a, idStr, pidStr, chindrenStr){  
    var r = [], hash = {}, id = idStr, pid = pidStr, children = chindrenStr, i = 0, j = 0, len = a.length;  
    for(; i < len; i++){  
        hash[a[i][id]] = a[i];  
    }  
    for(; j < len; j++){  
        var aVal = a[j], hashVP = hash[aVal[pid]];  
        if(hashVP){  
            !hashVP[children] && (hashVP[children] = []);  
            hashVP[children].push(aVal);  
        }else{  
            r.push(aVal);  
        }  
    }  
    return r;  
}  
  
var jsonData = eval('[
	{"id":"4","pid":"1","name":"大家电"},
	{"id":"5","pid":"1","name":"生活电器"},
	{"id":"1","pid":"0","name":"家用电器"},
	{"id":"2","pid":"0","name":"服饰"},
	{"id":"3","pid":"0","name":"化妆"},
	{"id":"7","pid":"4","name":"空调"},
	{"id":"8","pid":"4","name":"冰箱"},
	{"id":"9","pid":"4","name":"洗衣机"},
	{"id":"10","pid":"4","name":"热水器"},
	{"id":"11","pid":"3","name":"面部护理"},
	{"id":"12","pid":"3","name":"口腔护理"},
	{"id":"13","pid":"2","name":"男装"},
	{"id":"14","pid":"2","name":"女装"},
	{"id":"15","pid":"7","name":"海尔空调"},
	{"id":"16","pid":"7","name":"美的空调"},
	{"id":"19","pid":"5","name":"加湿器"},
	{"id":"20","pid":"5","name":"电熨斗"}
	]');  
  
var jsonDataTree = transData(jsonData, 'id', 'pid', 'chindren');  
console.log(jsonDataTree);  
//结果如下:
[
	{"id":"1","pid":"0","name":"家用电器", "chindren":[
		{"id":"4","pid":"1","name":"大家电", "chindren":[
			{"id":"7","pid":"4","name":"空调", "chindren":[
				{"id":"15","pid":"7","name":"海尔空调"},
				{"id":"16","pid":"7","name":"美的空调"}
			]},
			{"id":"8","pid":"4","name":"冰箱"},
			{"id":"9","pid":"4","name":"洗衣机"},
			{"id":"10","pid":"4","name":"热水器"}
		]},
		{"id":"5","pid":"1","name":"生活电器","chindren":[
			{"id":"19","pid":"5","name":"加湿器"},
			{"id":"20","pid":"5","name":"电熨斗"}
		]}
	]},
	{"id":"2","pid":"0","name":"服饰","chindren":[
		{"id":"13","pid":"2","name":"男装"},
		{"id":"14","pid":"2","name":"女装"}
	]},
	{"id":"3","pid":"0","name":"化妆","chindren":[
		{"id":"11","pid":"3","name":"面部护理"},
		{"id":"12","pid":"3","name":"口腔护理"}
	]}
]  


  • 4
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
### 回答1: 根据JSON生成树状拓扑图是一个常见的需求,在数据可视化和网络拓扑设计中很常见。要实现这个功能,可以按照以下步骤进行: 1. 首先,需要解析JSON数据。可以使用现有的JSON解析库,如jsoncpp或者json.net等,将JSON数据解析成对应的数据结构,如字典或对象。 2. 接下来,根据JSON数据的结构构建拓扑图的节点。可以使用节点类表示每个节点,包括节点的唯一标识符、名称、与父节点关联的关系等属性。通过遍历解析后的JSON数据,创建对应的节点对象。 3. 然后,根据节点之间的关系构建树状结构。可以通过遍历解析后的JSON数据,通过节点的关联属性,将其与对应的父节点关联起来,形成一棵树状结构。可以使用递归算法来实现这一步骤。 4. 最后,将树状拓扑图可视化展示出来。可以使用常见的数据可视化库,如D3.js、Echarts等,将构建好的树状结构渲染成树状图。可以根据需要进行节点展示、添加交互效果、样式美化等操作,使得拓扑图更加直观和易于理解。 需要注意的是,根据不同的JSON数据结构,可能需要对上述步骤进行一定的调整和适应。同时,要确保解析JSON和构建拓扑图的过程中发生错误时能够进行错误处理和异常捕获,提高程序的稳定性和健壮性。 ### 回答2: 根据JSON生成树状拓扑图的过程可以分为以下几个步骤。 首先,我们需要解析JSON数据,将其换为树形结构。可以使用各种编程语言提供的JSON解析库来实现这一步骤。解析后的数据结构一般是一个包含多个节点的列表,每个节点包含了其父节点的ID、自身的ID以及其他相关属性。 接下来,我们需要根据解析得到的数据构建树状结构。可以通过遍历节点列表的方式来构建树。对于每个节点,我们可以将其加入适当的父节点的子节点列表中。 在构建树状结构后,我们可以使用图形库来绘制树状拓扑图。可以使用各种语言提供的图形库,如Python的matplotlib库、JavaScript的d3.js库等。在绘制的过程中,一般会使用递归的方式来遍历树的节点,并根据节点的属性来绘制相应的图形。 绘制树状拓扑图的方式有很多种,可以根据具体需求来选择。一种常见的方式是使用节点坐标来确定节点在图形中的位置,然后通过线段来连接父子节点,形成树状结构。也可以根据节点的层级来调整节点在图形中的位置,使得整个拓扑图更加直观和美观。 最后,我们可以将绘制好的树状拓扑图保存为图片或展示在网页上,以便用户查看和分析。 ### 回答3: 根据JSON生成树状拓扑图,可以采用递归遍历的方式来实现。 首先,我们需要解析JSON数据,将其化为树结构。假设JSON数据格式如下: { "name": "A", "children": [ { "name": "B", "children": [ { "name": "C", "children": [] }, { "name": "D", "children": [] } ] }, { "name": "E", "children": [] } ] } 我们可以使用递归函数来遍历JSON数据,并将其化为树状结构。首先,我们将根节点添加到树中,然后递归遍历其子节点,并添加到对应的父节点下。 在遍历JSON的过程中,我们可以利用图形库(如D3.js)来绘制树状拓扑图。根据节点的层级和父子关系,我们可以设置节点的位置和连接线的样式。 具体步骤如下: 1. 解析JSON数据,获取根节点。 2. 创建树状图容器。 3. 遍历根节点的子节点: - 创建节点元素,并设置节点样式。 - 添加子节点到父节点下。 - 递归遍历子节点的子节点。 4. 绘制连接线。 5. 增加节点的点击事件,使其可以展开和折叠。 通过以上步骤,我们可以根据JSON数据生成树状拓扑图。这样可以清晰地展示出数据之间的层级和关系,方便我们对数据进行分析和理解。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值