js解析多层嵌套的json，取出所有父元素属性和遍历所有子元素
已知一个多层嵌套的json，取出所有父元素和子元素的id值
思路：因为不知道到底嵌套了多少层，递归有可能造成栈溢出、查询时间特别久的问题
所以先查询一次，判断是否有子节点，如果有，取出子节点并到父节点上，并动态更改数据长度，这样无限循环处理json取出所有id
menuIdInit () {
var _this = this;
var _menu = _this.menus;
var menuId = [];
var len = _menu.length;
for(var i = 0; i < len; i++){
var item = _menu[i] ;
if(item.child && item.child.length != 0){
var child = item.child ;
for(var j = 0; j < child.length; j++){
_menu[len + j] = child[j] ;
}
len = _menu.length ;
}
menuId.push(item.id);
}
this.menusTree = menuId ;
},
已知子节点id取出所有父节点id的方法
思路和上面的一样，不过更复杂了一点
一个N层嵌套的json
1。先遍历json数据，做处理，取出所有children节点并到原始数据上并给了新属性parentNode，它的值是所有他的上一级的父节点id
2。遍历查询id，只需要查询最外面一层的id就是所有子节点和父节点的id属性了
3。获取值
//json的处理
function searchInit(json) {
var newJson = json.concat([]);
var len = newJson.length; //长度
var parentNode = [];
console.log('newJson', newJson);
for (var i = 0; i < len; i++) {
var item = newJson[i];
if (item.children && item.children.length != 0) {
var child = item.children;
for (var j = 0; j < child.length; j++) {
if (item.parentNode) {
child[j].parentNode = item.parentNode.concat([item.id]);
}
else {
child[j].parentNode = [item.id]
}
console.log(item.parentNode, item.id);
newJson[len + j] = child[j];
}
len = newJson.length;
}
}
return newJson; } //搜索当前权限，获得所有父级权限id
function searchTree(json, id) {
console.log("tree",json);
var newJson = json.concat([]);
var len = newJson.length; //长度
console.log("json",len);
var parentNode = [];
//查找id
for (var s = 0; s < len; s++) {
if (newJson[s].id == id) {
if (newJson[s].parentNode == null || newJson[s].parentNode.length == 0) {
parentNode = [];
}
else {
parentNode = newJson[s].parentNode;
}
}
else {
continue;
}
}
return parentNode;
} //获取最终所有权限列表id
//json :最初的权限列表
//keys :用户点击获取Vue获取到的最底层权限id数组
function getKeys(json, keys) {
var final = [];
for (var i = 0; i < keys.length; i++) {
var final = searchTree(json, keys[i]).concat(final);
}
if (json.length == 0 || keys.length == 0) {
return [];
}
else {
var c = $.unique((final.concat(keys)).sort());
return c;
}
}
JSON数据
{
"children": [
{
"children": [
{
"children": [
{
"children": null,
"name": "浏览",
"id": 443,
"label": "浏览",
"open": true,
"parentNode": [
121,
232,
411
]
},
{
"children": null,
"name": "批量删除",
"id": 420,
"label": "批量删除",
"open": true,
"parentNode": [
121,
232,
411
]
},
{
"children": null,
"name": "搜索",
"id": 415,
"label": "搜索",
"open": true,
"parentNode": [
121,
232,
411
]
},
{
"children": null,
"name": "删除",
"id": 414,
"label": "删除",
"open": true,
"parentNode": [
121,
232,
411
]
},
{
"children": null,
"name": "编辑",
"id": 413,
"label": "编辑",
"open": true,
"parentNode": [
121,
232,
411
]
},
{
"children": null,
"name": "新增",
"id": 412,
"label": "新增",
"open": true,
"parentNode": [
121,
232,
411
]
}
],
"name": "芯片备案",
"id": 411,
"label": "芯片备案",
"open": true,
"parentNode": [
121,
232
]
},
{
"children": [
{
"children": null,
"name": "编辑",
"id": 403,
"label": "编辑",
"open": true,
"parentNode": [
121,
232,
401
]
},
{
"children": null,
"name": "新增",
"id": 402,
"label": "新增",
"open": true,
"parentNode": [
121,
232,
401
]
}
],
"name": "软件版本管理",
"id": 401,
"label": "软件版本管理",
"open": true,
"parentNode": [
121,
232
]
},
{
"children": [
{
"children": [
{
"children": null,
"name": "浏览",
"id": 442,
"label": "浏览",
"open": true,
"parentNode": [
121,
232,
241,
371
]
},
{
"children": null,
"name": "删除",
"id": 374,
"label": "删除",
"open": true,
"parentNode": [
121,
232,
241,
371
]
},
{
"children": null,
"name": "编辑",
"id": 373,
"label": "编辑",
"open": true,
"parentNode": [
121,
232,
241,
371
]
},
{
"children": null,
"name": "新增",
"id": 372,
"label": "新增",
"open": true,
"parentNode": [
121,
232,
241,
371
]
}
],
"name": "内容源支持项管理",
"id": 371,
"label": "内容源支持项管理",
"open": true,
"parentNode": [
121,
232,
241
]
},
{
"children": [
{
"children": [
{
"children": null,
"name": "浏览",
"id": 441,
"label": "浏览",
"open": true,
"parentNode": [
121,
232,
241,
311,
351
]
},
{
"children": null,
"name": "删除",
"id": 354,
"label": "删除",
"open": true,
"parentNode": [
121,
232,
241,
311,
351
]
},
{
"children": null,
"name": "编辑",
"id": 353,
"label": "编辑",
"open": true,
"parentNode": [
121,
232,
241,
311,
351
]
},
{
"children": null,
"name": "新增",
"id": 352,
"label": "新增",
"open": true,
"parentNode": [
121,
232,
241,
311,
351
]
}
],
"name": "一体机管理",
"id": 351,
"label": "一体机管理",
"open": true,
"parentNode": [
121,
232,
241,
311
]
},
{
"children": [
{
"children": null,
"name": "浏览",
"id": 440,
"label": "浏览",
"open": true,
"parentNode": [
121,
232,
241,
311,
341
]
},
{
"children": null,
"name": "删除",
"id": 344,
"label": "删除",
"open": true,
"parentNode": [
121,
232,
241,
311,
341
]
},
{
"children": null,
"name": "编辑",
"id": 343,
"label": "编辑",
"open": true,
"parentNode": [
121,
232,
241,
311,
341
]
},
{
"children": null,
"name": "新增",
"id": 342,
"label": "新增",
"open": true,
"parentNode": [
121,
232,
241,
311,
341
]
}
],
"name": "遥控器管理",
"id": 341,
"label": "遥控器管理",
"open": true,
"parentNode": [
121,
232,
241,
311
]
},
{
"children": [
{
"children": null,
"name": "浏览",
"id": 439,
"label": "浏览",
"open": true,
"parentNode": [
121,
232,
241,
311,
331
]
},
{
"children": null,
"name": "删除",
"id": 334,
"label": "删除",
"open": true,
"parentNode": [
121,
232,
241,
311,
331
]
},
{
"children": null,
"name": "编辑",
"id": 333,
"label": "编辑",
"open": true,
"parentNode": [
121,
232,
241,
311,
331
]
},
{
"children": null,
"name": "新增",
"id": 332,
"label": "新增",
"open": true,
"parentNode": [
121,
232,
241,
311,
331
]
}
],
"name": "蓝牙管理",
"id": 331,
"label": "蓝牙管理",
"open": true,
"parentNode": [
121,
232,
241,
311
]
},
{
"children": [
{
"children": null,
"name": "浏览",
"id": 438,
"label": "浏览",
"open": true,
"parentNode": [
121,
232,
241,
311,
321
]
},
{
"children": null,
"name": "删除",
"id": 324,
"label": "删除",
"open": true,
"parentNode": [
121,
232,
241,
311,
321
]
},
{
"children": null,
"name": "编辑",
"id": 323,
"label": "编辑",
"open": true,
"parentNode": [
121,
232,
241,
311,
321
]
},
{
"children": null,
"name": "新增",
"id": 322,
"label": "新增",
"open": true,
"parentNode": [
121,
232,
241,
311,
321
]
}
],
"name": "Wi-Fi管理",
"id": 321,
"label": "Wi-Fi管理",
"open": true,
"parentNode": [
121,
232,
241,
311
]
}
],
"name": "硬件型号管理",
"id": 311,
"label": "硬件型号管理",
"open": true,
"parentNode": [
121,
232,
241
]
},
{
"children": [
{
"children": [
{
"children": null,
"name": "浏览",
"id": 437,
"label": "浏览",
"open": true,
"parentNode": [
121,
232,
241,
291,
296
]
},
{
"children": null,
"name": "删除",
"id": 299,
"label": "删除",
"open": true,
"parentNode": [
121,
232,
241,
291,
296
]
},
{
"children": null,
"name": "编辑",
"id": 298,
"label": "编辑",
"open": true,
"parentNode": [
121,
232,
241,
291,
296
]
},
{
"children": null,
"name": "新增",
"id": 297,
"label": "新增",
"open": true,
"parentNode": [
121,
232,
241,
291,
296
]
}
],
"name": "RAM",
"id": 296,
"label": "RAM",
"open": true,
"parentNode": [
121,
232,
241,
291
]
},
{
"children": [
{
"children": null,
"name": "浏览",
"id": 436,
"label": "浏览",
"open": true,
"parentNode": [
121,
232,
241,
291,
292
]
},
{
"children": null,
"name": "删除",
"id": 295,
"label": "删除",
"open": true,
"parentNode": [
121,
232,
241,
291,
292
]
},
{
"children": null,
"name": "编辑",
"id": 294,
"label": "编辑",
"open": true,
"parentNode": [
121,
232,
241,
291,
292
]
},
{
"children": null,
"name": "新增",
"id": 293,
"label": "新增",
"open": true,
"parentNode": [
121,
232,
241,
291,
292
]
}
],
"name": "EMMC",
"id": 292,
"label": "EMMC",
"open": true,
"parentNode": [
121,
232,
241,
291
]
}
],
"name": "储存选项管理",
"id": 291,
"label": "储存选项管理",
"open": true,
"parentNode": [
121,
232,
241
]
},
{
"children": [
{
"children": null,
"name": "新增",
"id": 282,
"label": "新增",
"open": true,
"parentNode": [
121,
232,
241,
281
]
}
],
"name": "屏幕尺寸管理",
"id": 281,
"label": "屏幕尺寸管理",
"open": true,
"parentNode": [
121,
232,
241
]
},
{
"children": [
{
"children": null,
"name": "新增",
"id": 272,
"label": "新增",
"open": true,
"parentNode": [
121,
232,
241,
271
]
}
],
"name": "Android版本管理",
"id": 271,
"label": "Android版本管理",
"open": true,
"parentNode": [
121,
232,
241
]
},
{
"children": [
{
"children": null,
"name": "删除",
"id": 264,
"label": "删除",
"open": true,
"parentNode": [
121,
232,
241,
261
]
},
{
"children": null,
"name": "编辑",
"id": 263,
"label": "编辑",
"open": true,
"parentNode": [
121,
232,
241,
261
]
},
{
"children": null,
"name": "新增",
"id": 262,
"label": "新增",
"open": true,
"parentNode": [
121,
232,
241,
261
]
}
],
"name": "品牌管理",
"id": 261,
"label": "品牌管理",
"open": true,
"parentNode": [
121,
232,
241
]
},
{
"children": [
{
"children": null,
"name": "删除",
"id": 254,
"label": "删除",
"open": true,
"parentNode": [
121,
232,
241,
251
]
},
{
"children": null,
"name": "编辑",
"id": 253,
"label": "编辑",
"open": true,
"parentNode": [
121,
232,
241,
251
]
},
{
"children": null,
"name": "新增",
"id": 252,
"label": "新增",
"open": true,
"parentNode": [
121,
232,
241,
251
]
}
],
"name": "内容商管理",
"id": 251,
"label": "内容商管理",
"open": true,
"parentNode": [
121,
232,
241
]
}
],
"name": "机型属性配置",
"id": 241,
"label": "机型属性配置",
"open": true,
"parentNode": [
121,
232
]
}
],
"name": "基础数据管理",
"id": 232,
"label": "基础数据管理",
"open": true,
"parentNode": [
121
]
},
{
"children": [
{
"children": null,
"name": "新增",
"id": 142,
"label": "新增",
"open": true,
"parentNode": [
121,
141
]
}
],
"name": "机型备案",
"id": 141,
"label": "机型备案",
"open": true,
"parentNode": [
121
]
},
{
"children": null,
"name": "报备管理",
"id": 131,
"label": "报备管理",
"open": true,
"parentNode": [
121
]
}
],
"name": "设备管理",
"id": 121,
"label": "设备管理",
"open": true
}
我又写了一个简单一点的方法：
ES6对数组有新增的很简单的方法，有兴趣的可以尝试下，我忘记怎么用了，以后再更新
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<button onclick="add()">添加父节点</button>
<script>
var demo = [{
"children": [{
"children": [{
"children": [{
"children": [{
"children": [{
"children": [],
"index": "111111"
}],
"index": "11111"
}, {
"children": [],
"index": "11112"
}],
"index": "1111"
}, {
"children": [],
"index": "1112"
}],
"index": "111"
}, {
"children": [{
"children": [],
"index": "1121"
}, {
"children": [],
"index": "1122"
}],
"index": "112"
}, {
"children": [],
"index": "113"
}],
"index": "11"
}, {
"children": [],
"index": "12"
}],
"index": "1"
}];
console.log("old", demo); function add() {
init(demo);
addNode(demo)
console.log("new", demo);
} function init(item) {
for (let i = 0; i < item.length; i++) {
item[i]["parent"] = [];
item[i]["parent"].push(item[i]["index"]);
if (item[i].children.length !== 0) {
var oChild = item[i].children;
init(oChild);
}
}
return item;
} function addNode(item) {
// debugger
for (let i = 0; i < item.length; i++) {
var parent = item[i]["parent"];
if (item[i].children.length !== 0) {
var oChild = item[i].children;
for (let j = 0; j < oChild.length; j++) {
console.log("oChild", oChild);
oChild[j]["parent"] = oChild[j]["parent"].concat(parent);
}
addNode(oChild);
}
}
return item;
}
</script>
</body> </html>
js解析多层嵌套的json，取出所有父元素属性和遍历所有子元素的更多相关文章
- python中jsonpath模块，解析多层嵌套的json数据
1. jsonpath介绍用来解析多层嵌套的json数据;JsonPath 是一种信息抽取类库,是从JSON文档中抽取指定信息的工具,提供多种语言实现版本,包括:Javascript, Python, ...
- 使用jsonpath解析多层嵌套的json响应信息
Python自带的json库可以把请求转为字典格式, 但在多层嵌套的字典中取值往往要进行多次循环遍历才能取到相应的数据, 如: res_dict = { "code": 0, &q ...
- 【Java_Spring】java解析多层嵌套json字符串
java解析多层嵌套json字符串
- 多层嵌套的json数据
很多时候我们见到的json数据都是多层嵌套的,就像下面这般: {"name":"桔子桑", "sex":"男", , & ...
- 接口自动化多层嵌套的json数据处理
最近在做接口自动化测试,响应的内容大多数是多层嵌套的json数据,在对响应数据进行校验的时候,可以通过(key1.key2.key3)形式获取嵌套字典值的方法获取响应值,再和预期值比较 def get ...
- java解析多层嵌套json字符串
java分别解析下面两个json字符串 package jansonDemo; import com.alibaba.fastjson.JSON; import com.alibaba.fastjso ...
- .net(c#)提取多层嵌套的JSON
Newtonsoft.Json.Net20.dll 下载请访问http://files.cnblogs.com/hualei/Newtonsoft.Json.Net20.rar 在.net 2.0中提 ...
- JSON的简单使用之提取多层嵌套的JSON(C#)
JSON.NET(http://json.codeplex.com/)使用来将.NET中的对象转换为JSON字符串(序列化?),或者将JSON字符串转换为.NET中已有类型的对象(反序列化?) 反序列 ...
- js解析php返回的json数据无法获取length的问题分析
1.问题出现的过程,js解析php json_encode 的数据,无法获取长度信息,提示undefined debug: 首先打印查看了php encode后的数据,返现最外层是一个 ...
随机推荐
- Java利用hanlp完成语句相似度分析的案例详解
分享一篇hanlp分词工具使用的小案例,即利用hanlp分词工具分析两个中文语句的相似度的案例.供大家一起学习参考! 在做考试系统需求时,后台题库系统提供录入题目的功能.在录入题目的时候,由于题目来源 ...
- 在Python中调用Java扩展包HanLP测试记录
最近在研究中文分词及自然语言相关的内容,关注到JAVA环境下的HanLP,HanLP是一个致力于向生产环境普及NLP技术的开源Java工具包,支持中文分词(N-最短路分词.CRF分词.索引分词.用户自 ...
- sofa-rpc 服务端源码流程走读
sofa-rpc是阿里开源的一款高性能的rpc框架,这篇文章主要是对sofa-rpc provider启动服务流程的一个代码走读,下面是我简单绘制的一个基本的关系流程图 下面我们根据sofa-rpc代 ...
- Cygwin使用2-心得
引用:http://www.jb51.net/article/6236.htm 1.在cygwin里访问Windows盘 cd /cygdrive/c cd c: 2.整合cygwin命令到Windo ...
- Delphi实现软件中登录用户的操作权限
数据库结构:包括两张表BaseData和UserRightData,BaseData中是一张基本表,里面不区分用户,UserRightData是用户权限表,结构和BaseData一样,只是多了用户字段 ...
- 测试教程网.unittest教程.8. 断言异常
From: http://www.testclass.net/pyunit/assert_raise/ 背景 我们有时候需要断言一些方法会抛出异常,这些异常需要符合我们的预期. 代码 新建test_e ...
- ALGO-9_蓝桥杯_算法训练_摆动序列(DP)
问题描述 如果一个序列满足下面的性质,我们就将它称为摆动序列: . 序列中的所有数都是不大于k的正整数: . 序列中至少有两个数. . 序列中的数两两不相等: . 如果第i – 1个数比第i – 2个 ...
- [转]jvm加载类规则
jvm包括三种类加载器: 第一种:bootstrap classloader:加载Java的核心类. 第二种:extension classloader:负责加载jre的扩展目录中的jar包. 第三种 ...
- Java-Runoob-高级教程-实例-方法：02. Java 实例 – 输出数组元素
ylbtech-Java-Runoob-高级教程-实例-方法:02. Java 实例 – 输出数组元素 1.返回顶部 1. Java 实例 - 输出数组元素 Java 实例 以下实例演示了如何通过重 ...
- HTML-CSS font-family：中文字体的英文名称
本文转自网络,找不到原地址了,在这里保留了作者名. font-family:中文字体的英文名称 ellisontang 发表于2011-07-15 16:33 宋体* SimSun 黑体* SimHe ...