递归遍历json串获取相关数据

 

by:授客 QQ：1033553122

  1. 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: []

}

]

}

]

  1. 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)

 

结果

  1. 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串获取相关数据的更多相关文章

  1. 递归遍历JSON树

    递归遍历JSON树 前几天有个人问我,json串的层级无限深,但在json串中的key是已知的,在json串中的value,有些事Object,有些是Array,如何把这些层级无限深的key所对应的v ...

  2. 关于遍历javascript 中的json串浏览器输出的结果不统一的情况

    我们在做项目的时候经常会用到javascript的json. 首先说一下javascript的json串是什么,json串属于javascript的一个对象,有键和值对应的对象. 一般的格式是: a ...

  3. jquery获取json对象中的key小技巧，遍历json串所有key，value

    比如有一个json var json = {"name" : "Tom", "age" : 18}; 想分别获取它的key 和 value ...

  4. java解析json串获取key和value

    网上例子巨多,纯属个人笔记: JSONObject maleArray = maleObject.getJSONObject("extension"); Iterator<S ...

  5. javascript : 递归遍历数组

    我们假设有一个对象数组. 这个对象数组里的对象,有一个叫children的key,value也是一个对象数组. 这个数组里面可能还有children... 现在我们想递归遍历它. 上代码. test_ ...

  6. c# .net获取文件夹下的所有文件（多层递归），并获取区间数据（Jsion,xml等数据）写出到处理文件，学习分享~

    static void Main(string[] args)        { string path = string.Format(@"C:\Users\Administrator\D ...

  7. 使用Python登录腾讯MTA数据分析平台，然后获取相关数据

    思路: 第一步:使用pypeteer.launcher打开浏览器, 第二步:找到mta的登录页面,默认是使用QQ登录的,需要再触发一下切换使用帐号密码登录的按钮(通过使用iframe嵌入的腾讯单点登录 ...

  8. 非交互式shell脚本案例-实现自主从oracle数据库获取相关数据，并在制定目录生成相应规则的文件脚本

    get_task_id 脚本内容 #!/usr/bin/expect#配置登陆数据库的端口set port 22#配置登陆数据库的ip地址set oracleip 10.0.4.41#配置数据库实例名 ...

  9. ajax上传json串格式的数据的处理 以及 js操作dom的另一种方式

随机推荐

  1. 【nodejs原理&源码赏析（5）】net模块与通讯的实现

    [摘要] Node.js net模块的原理及使用 示例代码托管在:http://www.github.com/dashnowords/blogs 一. net模块简介 net模块是nodejs通讯功能 ...

  2. 基于VMware Workstation下Windows server的搭建

    网络安全学习内容 一.VMware安装Windows系统   1.1安装配置虚拟机 需要提前准备的东西: 配置网络实验室的IP: 为了满足实验中一些需要用到网络的需求,学校为我们提供了每个人学号密码的 ...

  3. 第七章 jQuery中的事件与动画

    事件的分类 基础事件: 鼠标事件 键盘事件 window事件 表单事件 复合事件: 鼠标光标悬停 鼠标连续点击 基础事件: 实例: mouseenter()和mouseover()用法的区别: mou ...

  4. UVA-11987

    I hope you know the beautiful Union-Find structure. In this problem, you're to implement somethingsi ...

  5. POJ2528 Mayor's poster

    The citizens of Bytetown, AB, could not stand that the candidates in the mayoral election campaign h ...

  6. 开通博客第一天，记录此时此刻，开始学习加强c#

    从2017年6月毕业到现在,不断的学习.net,在工作中不断的加强技术,终于在此时此刻决定开通博客,记录此后每一天学习的技术点,两年来,每天所涉及的技术点很杂,学了这个忘了那个,总感觉在进步却总是觉得 ...

  7. ARTS-S 做事情的正确方法

    有同学改bug的思路是:你们别管我怎么改,先看改的效果对不对.效果对,就这样改,效果不对,我再想别的办法.这样其实把自己关起来,盲目试错,效率太低. 合理的方法应该是和其他大佬们商量一个大家认为正确的 ...

  8. 关于OV7670摄像头的分辨率设置

    关于OV7670摄像头的分辨率设置最近一直在纠结如何把OV7670输出的图片分辨率缩小,以减少数据量来适应数据的传输,在网上看了好多也没有关于寄存器的具体设置,最终又读了几遍数据手册,加上网友们写的帖 ...

  9. 【React】377- 实现 React 中的状态自动保存

    点击上方"前端自习课"关注,学习起来~ 作者:陈俊宇 https://github.com/CJY0208 什么是状态保存? 假设有下述场景: 移动端中,用户访问了一个列表页,上拉 ...

  10. Linux服务器绑定多网卡IP

    需求:在1台Linux上绑定两个公网IP,实现扩展IP用于专用的服务 问题:添加了一个网卡上绑定1个弹性IP,主网卡绑定的公网ip可以正常访问,但是扩展网卡的公网ip无法访问. 原因:没有设置路由规则 ...