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

news2025/4/1 9:26:44

函数如下:

数据如下:

[{

  "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进行标号,数字最大的则为根节点。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2324159.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

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安装位数…

Agent AI综述

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

WPF ContentPresenter详解2

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

CSS——变换、过度与动画

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

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

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

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

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

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

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

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

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

【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 Ⅱ、相对位置…

《Python实战进阶》No34:卷积神经网络(CNN)图像分类实战

第34集:卷积神经网络(CNN)图像分类实战 2025年3月28日更新 增加了 CNN和AI大模型关系的说明。 2025年3月29日更新了代码,优化损失系数曲线可视化。 详细环境配置依赖和可一次性复制的完整代码见文末。 摘要 最近大模型推陈出新迭…

【qt】 布局器

参考博客:https://blog.csdn.net/Fdog_/article/details/107522283 目录 布局管理器概念常见的布局管理器及特点🔵QHBoxLayout水平布局🔵QVBoxLayout垂直布局 🔵QGridLayout网格布局 🔵QFormLayout表单布局 QT 高级布…

VMware Windows Tools 存在认证绕过漏洞(CVE-2025-22230)

漏洞概述 博通公司(Broadcom)近日修复了 VMware Windows Tools 中存在的一个高危认证绕过漏洞,该漏洞编号为 CVE-2025-22230(CVSS 评分为 9.8)。VMware Windows Tools 是一套实用程序套件,可提升运行在 VM…

【问题解决】Linux安装conda修改~/.bashrc配置文件后,root 用户下显示 -bash-4.2#

问题描述 在Linux安装conda下的python环境时候,修改了~/.bashrc文件,修改完成后,再次进入服务器后,登录时候显示的不是正常的[rootlocalhost ~]#,而是-bash-4.2# 原因分析: 网上原因有:/root下…

RabbitMQ 技术详解:异步消息通信的核心原理与实践

这里写目录标题 RabbitMQ 技术详解:异步消息通信的核心原理与实践一、RabbitMQ 本质剖析核心架构组件 二、核心功能与应用场景主要作用典型应用场景 三、工作流程深度解析消息传递流程关键协议机制 四、Java 实现示例1. 依赖配置(Maven)2. 消…

LLM架构解析:NLP基础(第一部分)—— 模型、核心技术与发展历程全解析

本专栏深入探究从循环神经网络(RNN)到Transformer等自然语言处理(NLP)模型的架构,以及基于这些模型构建的应用程序。 本系列文章内容: NLP自然语言处理基础(本文)词嵌入&#xff0…