文档章节

json转树状结构(js)

有资本再款
 有资本再款
发布于 2016/03/17 17:08
字数 398
阅读 120
收藏 0
/** 
 * 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":"口腔护理"}
]}
]


本文转载自:http://rockyuse.iteye.com/blog/1541308

有资本再款
粉丝 5
博文 99
码字总数 16312
作品 0
黄冈
私信 提问
4个为 JS 开发者准备的 Notepad++ 插件

这里是一些为 JavaScript 开发者准备的 4 个 Notepad++ 的插件。 提示: 你可通过 Notepad++ 的插件管理器来安装插件: 下面是这四个插件: JSLint 描述: JSLint是一个JavaScript验证工具,可...

红薯
2012/04/04
36.1K
18
MonjaDB —— 基于 Eclipse 的 MongoDB GUI 客户端工具

MonjaDB 是一个 MongoDB 的 GUI 客户端工具,提供直观的 MongoDB 数据管理的功能,支持 Windows/Mac/Linux. MonjaDB 是一个 Eclipse 插件,必须先安装 Eclipse。 主要特点: 易用 WYSIWYG 编...

红薯
2012/07/02
19.7K
22
信息发布系统 Jquery+MVC架构开发(9)view2

在这里需要补充的两部分内容: 1.是Global.asax下的路由设置,是我们必须要理解的内容: 在利用VisualStudio生成的MVC Project中的Global.asax文件中有一个RegisterRoutes方法。 routes.Map...

晨曦之光
2012/03/09
107
0
【jQuery】jQuery对本地json的读取和遍历

有时候,我们想写写一个跨平台的单机小程序、小软件,自然就会想到HTML5,但我们又不想运用服务器或者数据库这么重型的东西,自然就会想到用json或者xml来存些持久化数据,让我们的小程序加载...

yongh701
2018/05/15
510
0
【Vue】源码分析--vdom与html的相互转换

简析 vdom是由js对象节点组成的一个树状结构,通过diff算法对比js对象节点来更新,最后映射到原生的dom中 一个简单的dom结构 对应到js对象节点就是 代码实现 index.html vNode.js Github htt...

ns2250225
2018/03/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
5
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
6
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部