js解析递归json

简介: js解析递归json

日常在后台管理系统中我们常用到的有递归json。

前端根据后端给的接口获取到当前后台管理系统左侧菜单列json。而这个json是一个递归数组。


类似于如下:

var data = [
    {
        type:'1',
        children:[
            {
                type:'2',
                children:[
                    {
                        type:'3'
                    }
                ]    
            }
        ]
    }
]


当我们要点击每个菜单的时候获取当前的type 属性,这时候就比较懵逼了,我们怎么做呢?

解析它! 把这个递归数组解析成一个一维数组,无疑,就简单了许多。

代码如下:

var arr = [];
function getMenuAll (arr) {
    arr.filter(item => {
      menuArr.push(item)
      if(item.children && item.children.length) {
        getMenuAll(item.children)
      }
    })
  }
getMenuAll(data)
console.log(arr)

其实总的思想跟写递归组件的思想是差不多的,代码也很简单。各位顺手给个赞呗。

目录
相关文章
|
16天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
30天前
|
JSON JavaScript 前端开发
C++ 智能指针与 JSON 处理:高级编程技巧与常见问题解析
C++ 智能指针与 JSON 处理:高级编程技巧与常见问题解析
264 0
|
2天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
2天前
|
前端开发 JavaScript 编译器
深入解析JavaScript中的异步编程:Promises与async/await的使用与原理
【4月更文挑战第22天】本文深入解析JavaScript异步编程,重点讨论Promises和async/await。Promises用于管理异步操作,有pending、fulfilled和rejected三种状态。通过.then()和.catch()处理结果,但可能导致回调地狱。async/await是ES2017的语法糖,使异步编程更直观,类似同步代码,通过事件循环和微任务队列实现。两者各有优势,适用于不同场景,能有效提升代码可读性和维护性。
|
8天前
|
JavaScript
node.js递归拼凑成树形结构
node.js递归拼凑成树形结构
10 0
|
12天前
|
存储 JSON JavaScript
「Python系列」Python JSON数据解析
在Python中解析JSON数据通常使用`json`模块。`json`模块提供了将JSON格式的数据转换为Python对象(如列表、字典等)以及将Python对象转换为JSON格式的数据的方法。
28 0
|
30天前
|
JSON JavaScript 数据格式
【深入探究C++ JSON库】解析JSON元素的层级管理与遍历手段
【深入探究C++ JSON库】解析JSON元素的层级管理与遍历手段
90 2
|
30天前
|
XML JSON API
深入解析C++ JSON库:nlohmann::json:: parse的内部机制与应用
深入解析C++ JSON库:nlohmann::json:: parse的内部机制与应用
48 0
|
1月前
|
JSON 数据格式
人脸检测解析json的工具类face_test
人脸检测解析json的工具类face_test
14 0
|
8天前
yolo-world 源码解析(六)(2)
yolo-world 源码解析(六)
18 0

推荐镜像

更多