`
rockyuse
  • 浏览: 195436 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

json转树状结构(js)

 
阅读更多
/**
 * 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":"口腔护理"}]}]
分享到:
评论
1 楼 Coande 2017-07-21  
谢谢,这个很强大。

相关推荐

    生成JSON树型表结构

    EXT框架,作为一个强大的前端组件库,提供了丰富的UI控件,其中包括树形组件(EXT树),它能够根据JSON数据生成交互式的树状结构。 EXT树是EXT JS库中的一个组件,用于展示层级关系的数据,比如目录结构、组织架构...

    各种树状结构JS特效

    在IT领域,特别是前端开发中,"各种树状结构JS特效"是一个常见的需求,用于构建交互式的、层次化的用户界面。树状结构是一种数据表示形式,它由节点组成,每个节点可以有零个或多个子节点,形成了一个层级关系。在...

    把扁平化的数据转换成树形结构的JSON

    在IT行业中,数据的组织和...总之,将扁平化的数据转换成树形结构是JavaScript开发中的常见任务,尤其在处理JSON数据时。通过理解数据结构和递归算法,我们可以有效地完成这个转换,从而更好地管理和操作层次化数据。

    jQuery树状json数据转表格插件代码

    在网页开发中,数据展示是不可或缺的一部分,而jQuery作为一个广泛使用的JavaScript库,为开发者提供了丰富的功能,包括将树状结构的JSON数据转换成表格。本文将深入探讨如何使用jQuery实现这个功能,以及介绍一个名...

    java遍历JSON树

    在处理Web应用程序中的数据时,JSON(JavaScript Object Notation)是一种非常常见的数据格式。它轻量级且易于读写,因此广泛应用于前后端的数据交互中。对于Java开发者来说,能够熟练地操作JSON数据是必不可少的...

    C语言实现的 json格式字符串与结构体自动相互转化

    C语言是一种底层编程语言,通常用于系统编程、嵌入式开发等领域,而JSON(JavaScript Object Notation)则是一种轻量级的数据交换格式,广泛应用于服务器和客户端的数据传输。 描述中提到的"在cjson基础上,实现了...

    遍历多级树状json获得父子节点值

    当一个JSON对象中存在嵌套的对象或数组时,就形成了树状结构。 遍历多级树状JSON的基本思路是使用递归算法。递归是一种函数或过程调用自身的技术,非常适合处理具有层级关系的问题。以下是一个简单的递归函数模板,...

    树状结构下拉选

    5. **前端库与框架**:在实际开发中,开发者可能会使用JavaScript库(如jQuery UI)、组件库(如React的react-select、Vue的element-ui)或Angular的ng-zorro等来快速实现树状结构下拉选的功能。这些库提供了丰富的...

    jsonview,转换json格式

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,被广泛用于Web服务和应用程序之间的数据传输。JSONView是一款浏览器扩展,专为查看和解析JSON格式的数据设计,它使得在浏览器中查看结构化的JSON...

    jsoneditor-1.7.0 jsoneditor.js中文提示版

    2. **树形视图**:将JSON数据以层次分明的树状结构展示,便于用户直观理解数据结构和关系。用户可以通过点击节点进行展开、折叠,以及添加、删除和修改节点。 3. **表格视图**:对于大型或复杂的JSON数据,可以转换...

    用Ajax实现jsp页面树状结构

    此外,对于大型项目,可能需要选择更专业的前端框架,如AngularJS或Vue.js,它们提供了更强大的组件化和数据绑定能力,能够更好地管理复杂的树状结构。 综上所述,实现JSP页面的树状结构主要涉及JavaScript和Ajax...

    树形结构文件转Json格式

    总的来说,这个项目提供了一个实用工具,将树状数据结构转化为JSON,这对于需要处理层次数据的开发者来说是一个非常有价值的工具。通过理解树形结构和JSON的特性,我们可以更好地利用这个工具,适应各种应用场景。

    zTree实现的简单的树状结构的城市demo.rar

    `zTree`是一个非常流行的JavaScript插件,专门用于创建动态的树状结构,它适用于数据展示、层级管理等多种场景。本示例——"zTree实现的简单的树状结构的城市demo",是一个面向新手的实践项目,旨在帮助初学者掌握...

    java实现xml转json

    5. **注意事项**:XML和JSON的数据结构有所不同,XML支持更复杂的树状结构,而JSON则更偏向于扁平化的键值对。在转换过程中,可能会遇到数据丢失或不匹配的情况,因此在实际应用中,需要对XML和JSON的数据结构进行...

    jQuery树状json数据转表格插件.zip

    本项目“jQuery树状json数据转表格插件”是针对JSON数据的一种处理工具,它能将复杂的树状JSON结构转换成易于阅读的表格形式,尤其适用于数据展示和分析。 这个插件利用了jQuery的灵活性和高效性,通过原生的...

    JSON解析 v1.0

    3. **解析查看**:工具会将JSON数据解析成树状结构,方便查看和理解数据结构。 4. **编辑操作**:如果需要修改数据,可以直接在界面上进行编辑。 5. **格式化**:点击相应的按钮,将JSON数据格式化为易读的样式。 6....

    前端展示json数据,格式化,可折叠展开

    例如,一个简单的JSON查看器可以使用递归函数来处理嵌套的对象和数组,创建树状结构。当用户点击某个键时,对应的值(如果是对象或数组)会折叠或展开。以下是一个基本的实现思路: 1. 接收JSON字符串,用`JSON....

    jQuery树状json数据转表格插件代码.zip

    通过添加或移除特定的CSS类,可以改变行的显示状态,实现树状结构的展开和收起。 7. **二次修改**:正如描述中提到的,这个插件代码是可以进行二次修改的。开发者可以根据实际需求,比如添加新的功能、优化性能、...

    全国行政区域json格式文件

    在解压并处理这些文件时,需要按照json格式解析内容,并结合文件名来构建完整的行政区域树状结构。 总的来说,全国行政区域json格式文件为开发者提供了一种标准化、结构化的中国行政区域数据,便于在各种应用中处理...

    读取JSON格式转为DevExpress TreeList 树形(晨曦CZB)

    首先,JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在C#中,我们通常使用Newtonsoft.Json库来处理JSON数据,这是一个非常流行的第三方库,可以...

Global site tag (gtag.js) - Google Analytics