当前位置: 首页 > article >正文

如何在根据名称或id找到json里的节点以及对应的所有的父节点?

函数如下:

数据如下:

[{

  "name": "数据看板",

  "id": "data",

  "pageName": "tableeauData",

  "list": []

}, {

  "name": "审计模块",

  "id": "caigou",

  "pageName": "tableeauCaigou",

  "list": [{

    "name": "采购模块",

    "isActive": true,

    "pageName": "tableeauCaigou",

    "id": "caigou"

  }, {

    "name": "分销模块",

    "id": "fenxiao"

  }, {

    "name": "仓库物流模块",

    "id": "cangkuwuliu"

  }, {

    "name": "媒介模块",

    "id": "meijie"

  }]

}, {

  "name": "风险场景",

  "id": "caigoubuheli",

  "pageName": "caigoubuheli",

  "list": [{

    "name": "采购模块",

    "isActive": true,

    "pageName": "tableeauCaigou",

    "id": "caigou",

    "list": [{

      "name": "采购拆单",

      "isActive": true,

      "pageName": "caigoubuheli",

      "id": "caigoubuheli"

    }, {

      "name": "招标管理不规范",

      "isActive": true,

      "pageName": "zaobiaobuhege",

      "id": "zaobiaobuhege"

    }]

  }, {

    "name": "分销模块",

    "id": "fenxiao"

  }, {

    "name": "仓库物流模块",

    "id": "cangkuwuliu"

  }, {

    "name": "媒介模块",

    "id": "meijie"

  }]

}, {

  "name": "仓库物流模块",

  "id": "cangkuwuliu",

  "pageName": "cangku",

  "list": []

}, {

  "name": "媒介模块",

  "id": "meijie",

  "pageName": "meijie",

  "list": []

}]

就是一个json里有很多的list嵌套,这种常常用于处理树形结构的数据,比如菜单,再比如含有各种分类的商品,都是需要通过子节点反推到父节点

  let no = 0

  function findNodeByPageName(list, pageName) {

    for (const item of list) {

      if (item.list) {

        const result = findNodeByPageName(item.list, pageName);

        if (result) {

            no++

          result['parent' + no] = item;

          return result;

        }

      }

      if (item.pageName === pageName) {

        return {

          current: item,

          parent: null

        };

      }

    }

    return null;

  }

  // 示例用法

  const result = findNodeByPageName(menuList.value, routerName);

  console.log(result);

结果如下:

从当前节点进行反推,找到所有的父节点,然后用no进行标号,数字最大的则为根节点。

相关文章:

如何在根据名称或id找到json里的节点以及对应的所有的父节点?

函数如下: 数据如下: [{ "name": "数据看板", "id": "data", "pageName": "tableeauData", "list": [] }, { "name": "审计模块", "id": &quo…...

JS—异步编程:3分钟掌握异步编程

个人博客:haichenyi.com。感谢关注 一. 目录 一–目录二–引言三–JavaScript 事件循环机制四–定时器的秘密:setTimeout 和 setInterval五–异步编程模型对比 二. 引言 在现代Web开发中,异步编程是提升性能的关键技术。无论是脚本加载&am…...

mxgraph编辑器的使用

前端JS如何使用mxgraph编辑器 说明:此项目是JS项目,目前还不支持TS 引入资源 可以直接从官网上拿下来,或者从其他地方获取 官网编辑器 如果只是展示图形的话只引入 mxClient.js就可以了 一个免费在线编辑器 自己用它做了一个在线编辑器&#…...

electron打包vue2项目流程

1,安装一个node vue2 的项目 2,安装electron: npm install electron -g//如果安装还是 特比慢 或 不想安装cnpn 淘宝镜像查看是否安装成功:electron -v 3,进入到项目目录:cd electron-demo 进入项目目录…...

STM32F103_LL库+寄存器学习笔记11 - 串口收发的中断优先级梳理

导言 推荐的STM32 USARTDMA 中断优先级设置(完整方案): 以你的STM32F103 USART1 DMA实例为例: 推荐中断优先级设置中断优先级USART1空闲中断(接收相关)优先级0DMA1通道5接收中断(半满/满传输…...

Postman 如何发送 Post 请求上传文件? 全面指南

写一个后端接口,肯定离不开后续的调试,所以我使用了 Postman 来进行上传图片接口的调试,调试步骤也很简单: 第一步:填写请求 URL第二步:选择请求类型第三步:选择发送文件第四步:点击…...

Mathtype无法插入到Word中

在word工具栏上有没有出现Mtahtype,会出现以下两种情况: 1. 没有出现Mtahtype 2. 出现Mtahtype,但是点击会出现弹窗 “ Couldnt find the MathPage.wll ” 解决方案 首先查看word版本是32位还是64位,这个位数是office安装位数…...

快速了解ES6Module模块化

ES6 Module 模块,是能够单独命名并独立完成一定功能程序语句的集合 定义听上去高大上,其实在日常项目中几乎每个文件都会用到,甚至很不起眼, react组件的引用: // router.js import { createHashRouter } from react…...

Spring Boot 三层架构【清晰易懂】

Spring Boot 的三层架构是一种常见的软件设计模式,它将应用程序分为三个主要部分:控制器层(Controller)、服务层(Service) 和 数据访问层(Repository)。这种分层架构有助于代码的模块…...

并查集(Union-Find Set)课程笔记

目录 1. 并查集原理 2. 并查集的实现 3. 并查集应用 应用 1:省份数量问题 应用 2:等式方程的可满足性 1. 并查集原理 并查集用于处理需要将不同元素划分成若干不相交集合的问题。最开始时,每个元素都是单独的一个集合,随后根…...

Agent AI综述

Agent AI综述 研究背景:早期AI研究目标分散,如今大语言模型(LLMs)和视觉语言模型(VLMs)的发展带来新契机,促使AI向能在复杂环境中担当动态角色的方向转变。Agent AI正是在这种背景下应运而生,融合语言、视觉等多种能力,有望重塑人类体验和产业标准。 Agent AI的融合:…...

Linux 练习二 LVS的NAT模式

作业 要求:使用LVS的 NAT 模式实现 3 台 RS 的轮询访问。IP地址和主机自己规划。 节点规划 主机角色系统网络IPclientclientredhat 9.5仅主机192.168.60.100/24lvslvsredhat 9.5仅主机 NAT192.168.60.200/24 VIP 192.168.23.8/24 DIPnginxrs1redhat 9.5NAT192.16…...

MongoDB 与 Elasticsearch 使用场景区别及示例

一、核心定位差异 ‌MongoDB‌ ‌定位‌:通用型文档数据库,侧重数据的存储、事务管理及结构化查询,支持 ACID 事务‌。‌典型场景‌: 动态数据结构存储(如用户信息、商品详情)‌。需事务支持的场景&#xf…...

WPF ContentPresenter详解2

ContentPresenter与ContentControl的区别 ContentControl 和 ContentPresenter 是 WPF 中两个相关的控件,但它们在用途和功能上有一些关键的区别。理解这两者的区别和联系有助于更好地设计和开发用户界面。 1. 类层次结构 ContentControl:位于 WPF 控件…...

Ubuntu20.0.4创建ssh key以及repo命令的使用

创建ssh key ssh-keygen //一路回车,不用输入任何东西cat ~/.ssh/id_rsa.pub 配置git config git config --global user.name xxx // 设置git用户名git config --global user.email xxx.com.cn //设置git 邮箱git config --list// remove the git config// rm -fr …...

CSS——变换、过度与动画

巧妙的使用变换、过度与动画可以让页面设计更有趣、更吸引人,同时还能提高可用性和感知性能。 文章目录 一,变换(一)2D变换1,定义旋转2,定义缩放3,定义移动4,定义倾斜5,定…...

鸿蒙OS 5.0 服务能力框架深入剖析

鸿蒙OS 5.0 服务能力框架中关键类的作用分析 1\. 鸿蒙OS 5.0 服务能力框架导论 鸿蒙OS 5.0,亦称鸿蒙智联 5 1,标志着华为在分布式操作系统领域迈出的重要一步。与早期版本采用兼容安卓的AOSP层、Linux内核以及LiteOS内核不同,鸿蒙OS 5.0 专注…...

【PCB工艺】时序图(Timing Diagram)

时序图(Timing Diagram)是描述数字电路信号随时间变化的图示,广泛用于分析和设计时序逻辑电路,如锁存器(Latch)、触发器(Flip-Flop)、计数器、状态机等。这篇文章从时序图的原理、构…...

第四届能源、电力与电气国际学术会议(ICEPET 2025)

重要信息 地点:中国-成都 官网:www.icepet.net(了解参会投稿等信息) 时间:2025年4月25-27日 简介 第四届能源、电力与电气会(ICEPET 2025定于2025年4月25-27日在中国成都举办。 本次将围绕能源、电力及…...

el-table + el-pagination 前端实现分页操作

el-table el-pagination 前端实现分页操作 后端返回全部列表数据&#xff0c;前端进行分页操作 html代码 <div><el-table :data"tableData" border><el-table-column label"序号" type"index" width"50" /><el…...

Redis数据持久化机制 + Go语言读写Redis各种类型值

Redis&#xff08;Remote Dictionary Server&#xff09;作为高性能的键值存储系统&#xff0c;凭借其丰富的数据类型和原子性操作&#xff0c;成为现代分布式系统中不可或缺的组件。 1、Redis支持的数据类型 Redis支持的数据类型可归纳为以下9类&#xff1a; String&#x…...

【机器学习】什么是逻辑回归?

什么是逻辑回归&#xff1f; 逻辑回归&#xff08;Logistic Regression&#xff09;是一个用于分类问题的统计学模型&#xff0c;尽管名字里有“回归”二字&#xff0c;它其实是用来做分类的&#xff0c;不是做数值预测的。 通俗易懂的理解 我们可以通过一个简单的例子来理解…...

Unity程序嵌入Qt后点击UI按钮Button没有反应

一、前言 在一次项目中&#xff0c;需要将Unity程序嵌入qt中&#xff0c;并在主界面显示&#xff0c;根据网络资料与相关代码&#xff0c;成功将unity程序嵌入&#xff0c;但是在点击Unity的Button按钮时却没有响应&#xff0c;在查找相关资料后&#xff0c;解决问题&#xff…...

【Bug】记录2025年遇到的Bug以及修复方案

--------------------------------------------------------分割线 2025.3.25-------------------------------------------------------windows环境下通过命令行终端&#xff08;必须是命令行下&#xff0c;直接赋值传递&#xff0c;代码正常&#xff09;的形式传递字符串时&a…...

2025最新“科研创新与智能化转型“暨AI智能体开发与大语言模型的本地化部署、优化技术实践

第一章、智能体(Agent)入门 1、智能体&#xff08;Agent&#xff09;概述&#xff08;什么是智能体&#xff1f;智能体的类型和应用场景、典型的智能体应用&#xff0c;如&#xff1a;Google Data Science Agent等&#xff09; 2、智能体&#xff08;Agent&#xff09;与大语…...

VUE3+TypeScript项目,使用html2Canvas+jspdf生成PDF并实现--分页--页眉--页尾

使用html2CanvasJsPDF生成pdf&#xff0c;并实现分页添加页眉页尾 1.封装方法htmlToPdfPage.ts /**path: src/utils/htmlToPdfPage.tsname: 导出页面为PDF格式 并添加页眉页尾 **/ /*** 封装思路* 1.将页面根据A4大小分隔边距&#xff0c;避免内容被中间截断* 所有元素层级不要…...

【NLP 46、大模型技术发展】

目录 一、ELMo 2018 训练目标 二、GPT-1 2018 训练目标 三、BERT 2018 训练目标 四、Ernie —— baidu 2019 五、Ernie —— Tsinghua 2019 六、GPT-2 2019 七、UNILM 2019 八、Transformer - XL & XLNet 2019 1.模型结构 Ⅰ、循环机制 Recurrence Mechanism Ⅱ、相对位置…...

在 Ubuntu 上安装 Docker 的完整指南

1. 卸载旧版本(如有) 在安装新版本前,建议先卸载旧版本: sudo apt remove docker docker-engine docker.io containerd runc 2. 安装依赖包 更新软件包索引并安装必要的依赖: sudo apt update sudo apt install -y ca-certificates curl gnupg lsb-release 3. 添加 Do…...

可以把后端的api理解为一个目录地址,但并不准确

将后端的 API 理解为一个“目录地址”是可以的&#xff0c;但并不完全准确。让我们更详细地解释一下。 目录 1、生动形象了解api 2、后端 API 的作用 3、可以将 API 理解为“目录地址”的原因 &#xff08;1&#xff09;URL 路径 &#xff08;2&#xff09;层次结构 4、…...

硬件基础--16_公式梳理

公式梳理 欧姆定律: IU/R 1.欧姆定律有局限性&#xff0c;仅适用于纯电阻电路(或者说纯电阻元器件&#xff0c;纯电阻设备) 2.纯电阻电路:消耗的电能仅转化为热能&#xff0c;没有其他形式的能量转换。 功率计算:PUI 1.导出公式:PU2 /R 2.导出公式:PI2 R 焦耳定律:QI2 Rt 1.导…...