JavaScript 递归遍历json串获取相关数据
递归遍历json串获取相关数据
by:授客 QQ：1033553122
- 1. 测试数据
// 导航菜单
[
{
id: 1,
parentId: 0,
parentName: null,
name: "首页",
url: "/home",
perms: null,
requireAuth: true,
hidden: false,
type: 0,
icon: "fa fa-home fa-lg",a
orderNum: 1,
level: 0,
children: [
{
id: 2,
parentId: 1,
parentName: null,
name: "首页二级菜单1",
url: "",
perms: null,
requireAuth: true,
hidden: false,
type: 1,
icon: "fa fa-home fa-lg",
orderNum: 1,
level: 0,
children: [
{
id: 3,
parentId: 2,
parentName: null,
name: "首页三级菜单1",
url: "",
perms: null,
requireAuth: true,
hidden: false,
type: 1,
icon: "fa fa-home fa-lg",
orderNum: 1,
level: 0,
children: [
{
id: 4,
parentId: 3,
parentName: null,
name: "首页四级菜单1",
url: "/home/level4Menu1",
perms: null,
requireAuth: true,
hidden: false,
type: 0,
icon: "fa fa-home fa-lg",
orderNum: 1,
level: 0,
children: []
}
]
},
{
id: 5,
parentId: 2,
parentName: null,
name: "首页三级菜单2",
url: "/home/level3Menu2",
perms: null,
requireAuth: true,
hidden: false,
type: 0,
icon: "fa fa-home fa-lg",
orderNum: 2,
level: 0,
children: []
}
]
},
{
id: 6,
parentId: 1,
parentName: null,
name: "首页二级菜单2",
url: "",
perms: null,
requireAuth: true,
hidden: false,
type: 1,
icon: "fa fa-home fa-lg",
orderNum: 2,
level: 0,
children: [
{
id: 7,
parentId: 6,
parentName: null,
name: "首页三级菜单3",
url: "/home/level3Menu3",
perms: null,
requireAuth: true,
hidden: false,
type: 0,
icon: "fa fa-home fa-lg",
orderNum: 1,
level: 0,
children: []
}
]
}
]
},
{
id: 8,
parentId: 0,
parentName: null,
name: "工作台",
url: "/workbench",
perms: null,
requireAuth: true,
hidden: false,
type: 0,
icon: "fa fa-home fa-lg",
orderNum: 2,
level: 0,
children: []
},
{
id: 9,
parentId: 0,
parentName: null,
name: "测试视图",
url: "/testerView",
perms: null,
requireAuth: true,
hidden: false,
type: 0,
icon: "fa fa-home fa-lg",
orderNum: 3,
level: 0,
children: [
{
id: 10,
parentId: 9,
parentName: null,
name: "测试视图二级菜单1",
url: "",
perms: null,
requireAuth: true,
hidden: false,
type: 1,
icon: "fa fa-home fa-lg",
orderNum: 1,
level: 0,
children: [
{
id: 11,
parentId: 10,
parentName: null,
name: "测试视图三级菜单1",
url: "/testerView/level3Menu1",
requireAuth: true,
hidden: false,
type: 0,
icon: "fa fa-home fa-lg",
orderNum: 1,
level: 0,
children: []
},
{
id: 12,
parentId: 10,
parentName: null,
name: "测试视图三级菜单2",
url: "/testerView/level3Menu2",
requireAuth: true,
hidden: false,
type: 0,
icon: "fa fa-home fa-lg",
orderNum: 2,
level: 0,
children: []
}
]
}
]
},
{
id: 13,
parentId: 0,
parentName: null,
name: "配置",
url: "/settings",
requireAuth: true,
hidden: false,
type: 0,
icon: "fa fa-home fa-lg",
orderNum: 4,
level: 0,
children: []
},
{
id: 14,
parentId: 0,
parentName: null,
name: "其它",
url: "",
requireAuth: true,
hidden: false,
type: 0,
icon: "fa fa-home fa-lg",
orderNum: 5,
level: 0,
children: [
{
id: 15,
parentId: 14,
parentName: null,
name: "其它菜单",
url: "/other",
requireAuth: true,
hidden: false,
type: 0,
icon: "fa fa-home fa-lg",
orderNum: 1,
level: 0,
children: []
}
]
}
]
- 2. 需求1
获取菜单“路由”信息：
获取每级菜单的url,name,icon, id, requireAuth字段信息，构成节点，以及其子菜单对应字段的信息，构成子节点，要求：
如果本级菜单url为空，则不记录该级菜单相关的信息，此时，如果其子菜单url不为空，则要记录其子菜单相关字段的信息，并向上查找离该子菜单最近，并且url不为空的菜单信息，并把该菜单信息当做其父节点，形如以下
[{path:"/home "，
name: "首页"，
meta: {icon: "fa fa-home fa-lg", index: 4, requireAuth: true}，
children:[{path: "/home/level3Menu3",
name: "首页三级菜单3",
meta: {icon: "fa fa-home fa-lg", index: 4, requireAuth: true},
children: []},
...
]
},
...
]
如果本级菜单url不为空，则记录该级菜单自身的信息，作为父节点，此时，如果其子菜单url不为空，则要记录其子菜单相关字段的信息，构成子节点，否则不记录子菜单信息
编码
function getMenuRoutes(menuList = [], parent = []) {
for (var i = 0; i < menuList.length; i++) {
var route = {}
if (menuList[i].url && /\S/.test(menuList[i].url)) {
route = {
path: menuList[i].url,
name: menuList[i].name,
children: [],
meta: {
icon: menuList[i].icon,
index: menuList[i].id,
requireAuth: menuList[i].requireAuth
}
}
if (menuList[i].children && menuList[i].children.length >= 1) {
getMenuRoutes(menuList[i].children, route["children"])
}
} else {
if (menuList[i].children && menuList[i].children.length >= 1) {
getMenuRoutes(menuList[i].children, parent)
}
}
if (JSON.stringify(route) != "{}") {
parent.push(route)
}
}
return parent
}
调用
var result = getMenuRoutes(navMenuData, [])
console.log(result)
结果
- 3. 需求2
获取每级菜单的url,name,icon, id, requireAuth字段信息，构成一级节点，要求：
如果级菜单url为空，则不记录该级菜单相关的信息
编码
function getMenuRoutes (menuList = [], routes = []) {
var temp = []
for (var i = 0; i < menuList.length; i++) {
var route = {}
if (menuList[i].url && /\S/.test(menuList[i].url)) {
var route = {
path: menuList[i].url,
name: menuList[i].name,
children: [],
meta: {
icon: menuList[i].icon,
index: menuList[i].id,
requireAuth: menuList[i].requireAuth
}
}
routes.push(route)
}
if (menuList[i].children && menuList[i].children.length >= 1) {
temp = temp.concat(menuList[i].children)
}
}
if (temp.length >= 1) {
getDynamicRoutes2(temp, routes)
}
return routes
调用
var result = getMenuRoutes(navMenuData, [])
console.log(result)
结果
JavaScript 递归遍历json串获取相关数据的更多相关文章
- 递归遍历JSON树
递归遍历JSON树 前几天有个人问我,json串的层级无限深,但在json串中的key是已知的,在json串中的value,有些事Object,有些是Array,如何把这些层级无限深的key所对应的v ...
- 关于遍历javascript 中的json串浏览器输出的结果不统一的情况
我们在做项目的时候经常会用到javascript的json. 首先说一下javascript的json串是什么,json串属于javascript的一个对象,有键和值对应的对象. 一般的格式是: a ...
- jquery获取json对象中的key小技巧，遍历json串所有key，value
比如有一个json var json = {"name" : "Tom", "age" : 18}; 想分别获取它的key 和 value ...
- java解析json串获取key和value
网上例子巨多,纯属个人笔记: JSONObject maleArray = maleObject.getJSONObject("extension"); Iterator<S ...
- javascript : 递归遍历数组
我们假设有一个对象数组. 这个对象数组里的对象,有一个叫children的key,value也是一个对象数组. 这个数组里面可能还有children... 现在我们想递归遍历它. 上代码. test_ ...
- c# .net获取文件夹下的所有文件（多层递归），并获取区间数据（Jsion,xml等数据）写出到处理文件，学习分享~
static void Main(string[] args) { string path = string.Format(@"C:\Users\Administrator\D ...
- 使用Python登录腾讯MTA数据分析平台，然后获取相关数据
思路: 第一步:使用pypeteer.launcher打开浏览器, 第二步:找到mta的登录页面,默认是使用QQ登录的,需要再触发一下切换使用帐号密码登录的按钮(通过使用iframe嵌入的腾讯单点登录 ...
- 非交互式shell脚本案例-实现自主从oracle数据库获取相关数据，并在制定目录生成相应规则的文件脚本
get_task_id 脚本内容 #!/usr/bin/expect#配置登陆数据库的端口set port 22#配置登陆数据库的ip地址set oracleip 10.0.4.41#配置数据库实例名 ...
- ajax上传json串格式的数据的处理 以及 js操作dom的另一种方式
随机推荐
- Python报错ERROR: Command errored out with exit status 1:
解决方法: 1.以管理员身份打开cmd 2.pip install robotframework-AutoItLibrary (本次安装时Python基于3.7.3,pip为最新版本) 3.安装成功
- DP思想在斐波那契数列递归求解中的应用
斐波那契数列:1, 1, 2, 3, 5, 8, 13,...,即 f(n) = f(n-1) + f(n-2). 求第n个数的值. 方法一:迭代 public static int iterativ ...
- .Net Core使用Ocelot网关(一) -负载,限流,熔断,Header转换
1.什么是API网关 API网关是微服务架构中的唯一入口,它提供一个单独且统一的API入口用于访问内部一个或多个API.它可以具有身份验证,监控,负载均衡,缓存,请求分片与管理,静态响应处理等.API ...
- luogu P4302 [SCOI2003]字符串折叠
题目描述 折叠的定义如下: 一个字符串可以看成它自身的折叠.记作S = S X(S)是X(X>1)个S连接在一起的串的折叠.记作X(S) = SSSS-S(X个S). 如果A = A', B = ...
- SI4432和SI1212通讯
SI4432是美国Silabs研发的一款工作频段低于1GHz的高性能射频收发芯片,属于其EzRadioPro系类.在国内已经广泛应用于工业.科研.医疗(ISM)以及短距离无线通信设备(SRD),其输出 ...
- Java学习笔记（面向对象下）
面向对象(下) 类的继承 类的继承是指在一个现有类的基础上去构建一个新的类,构建出来的新类称为子类,现有类称为父类,子类会自动拥有父类所有可继承的属性和方法.(用extends关键字) //定义A ...
- Ganglia与Centreon整合构建智能化监控报警平台
一.智能运维监控报警平台的组成 随着大数据时代的来临,运维工作的难度越来越大,每个运维人员都要面临不计其数的服务器和海量的数据,如何保证众多服务器和业务系统稳定高效地运行并尽量减少死机时间,成为考核运 ...
- Day 08 可变与不可变对象/列表与字典内置方法
目录 可变对象与不可变对象 可变对象 不可变对象 列表的内置方法 字典内置方法 可变对象与不可变对象 可变对象 对象指向的内存中的值会改变,当更改这个变量的时候,还是指向原来内存中的值,并且在原来的内 ...
- 【Web技术】334- yarn、npm、cnpm 三者如何优雅的在一起使用 ？
前端得包管理你有过几个? 一位用不好包管理器的前端,是一个入门级前端,一个用不好webpack的前端,是一个初级前端 三个包管理器是可以一起用的,只要你够胆大心细,就没任何问题! 在javeScrip ...
- python基础入门 列表
列表 1.关键字---list 2.定义:用来存储数据可存储多种数据类型 支持索引,切片 是有序的 可变的 3.定义一个列表 l1 = ['列表','字符串','lnh',123,'kk0','ttt ...