js 如何把一个json数据,组装成树形数据

在 JavaScript 中,可以使用递归的方式将一个 JSON 数据组装成树形数据。

以下是一个示例代码:

function convertToTree(data) {const tree = [];for (let i = 0; i < data.length; i++) {const node = data[i];const parentId = node.parentId;if (parentId === null || parentId === undefined) {tree.push(node);continue;}for (let j = 0; j < data.length; j++) {const parentNode = data[j];if (parentNode.id === parentId) {if (!parentNode.children) {parentNode.children = [];}parentNode.children.push(node);break;}}}return tree;
}// 示例数据
const jsonData = [{ id: 1, name: 'Node 1', parentId: null },{ id: 2, name: 'Node 2', parentId: 1 },{ id: 3, name: 'Node 3', parentId: 1 },{ id: 4, name: 'Node 4', parentId: 2 },{ id: 5, name: 'Node 5', parentId: 2 },{ id: 6, name: 'Node 6', parentId: 3 },
];const treeData = convertToTree(jsonData);
console.log(treeData);

以上代码将会输出以下结果:

[{ id: 1, name: 'Node 1', children: [{ id: 2, name: 'Node 2', children: [{ id: 4, name: 'Node 4' },{ id: 5, name: 'Node 5' }] },{ id: 3, name: 'Node 3', children: [{ id: 6, name: 'Node 6' }] }] }
]

这样,你就可以将一个 JSON 数据组装成树形数据了。

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

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

相关文章

修改分区序列号的简单方法!

“我使用的是自己组装的电脑&#xff0c;安装了正版Win10操作系统。但奇怪的是&#xff0c;这台电脑看起来完全正常&#xff0c;但是每次启动时的分区序列号却总是不同。我现在要使用的软件需要依赖分区序列号进行注册&#xff0c;所以这个问题不解决我就没法使用软件。系统是正…

【机器视觉技术】:开创人工智能新时代

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; IT杂谈 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1; 前言&#x1f324;️ 机器视觉技术的实现☁️ 图像采集☁️ 图像处理☁️ 数据建模☁️应用展示…

掌握你的Mac,iStat Menus带你了解mac系统状态

iStat Menus for mac是一款强大的mac系统状态监控工具&#xff0c;它能够提供实时的系统信息和性能监测&#xff0c;帮助用户全面了解和管理自己的Mac设备。无论是CPU、内存、网络、硬盘还是传感器数据&#xff0c;iStat Menus都能直观地展示&#xff0c;并且支持自定义布局和样…

仿东郊到家预约按摩小程序开发;

在这个快节奏的现代社会&#xff0c;人们对便捷、高效的服务需求日益增大。正因如此&#xff0c;到家预约系统上门按摩小程序应运而生&#xff0c;它结合了互联网技术和传统按摩服务&#xff0c;不仅满足了人们对便捷按摩服务的需求&#xff0c;还为商家提供了全新的商业价值。…

Glide结合OkHttp保证短信验证接口携带图形验证码接口返回Cookie值去做网络请求

一、实现效果 二、步骤 注意&#xff1a;仅展示核心部分代码 1、导入依赖 api com.github.bumptech.glide:glide:4.10.0 kapt com.github.bumptech.glide:compiler:4.10.0 api com.squareup.okhttp3:okhttp:3.11.0 api com.squareup.okhttp3:logging-interceptor:3.11.02、自…

记录-EasyCode代码生成-自定义代码模板

文章目录 controller&#xff1a;entity&#xff1a;mapper.java:mapper.xml:service:serviceImpl: 数据持久层使用MybatisPlus controller&#xff1a; ## controller控制层 ##导入宏定义 $!{define.vm}##设置表后缀&#xff08;宏定义&#xff09; #setTableSuffix("C…

做项目,要从学生思维里跳出来

今天分享下在23期群的聊天记录&#xff0c;关于做项目正确的思维&#xff0c;自己曾经走过一些弯路&#xff0c;希望大家能Get到。 做项目&#xff0c;一定要从学生思维里跳出来。 1.学生思维就是前期就想每个细节都要搞懂&#xff0c;感觉才能往下&#xff0c;其实像lora&…

[Java][单列集合+数组遍历方法]增强for循环学习体会

在Java的学习中&#xff0c;我们已经习惯了使用for循环来进行遍历操作。这种操作在普通的数组和字符串中是非常有效的。但是当我们引入了集合这个概念&#xff0c;并且将多个不同的字符串储存进某一个集合的时候&#xff0c;我们发现原先的for循环是依赖于数组索引或者字符串索…

我的CSDN创作纪念日

⭐前言 同志们&#xff0c;大家好&#xff01;我是乱码怪才&#xff0c;这篇博客我来分享一下我和CSDN的故事————一个人工智能学生和CSDN的相遇。 &#x1f496;相遇CSDN&#x1f496; 我在刚上大学的时候就下载了CSDN&#xff0c;那时候只是在平台上搜一些C语言的算法题…

基于可穿戴的健康监护终端--研究进展报告

基于可穿戴的健康监护终端--研究进展报告 1 引言2 传感器介绍2.1 呼吸速率传感器2.2 温度传感器2.3 心脏跳动传感器 3 论文介绍3.1 Effective Data Decision-Making and Transmission System Based on Mobile Health for Chronic Disease Management in the Elderly3.2 Design …

代码随想录算法训练营 ---第四十六天

第一题&#xff1a; 简介&#xff1a; 本题的重点在于确定背包容量和物品数量 确定dp数组以及下标的含义 dp[i] : 字符串长度为i的话&#xff0c;dp[i]为true&#xff0c;表示可以拆分为一个或多个在字典中出现的单词。 2.确定递推公式 如果确定dp[j] 是true&#xff0c;且…

C语言结构体数组实现一个简单的登录注册功能

实现登录注册 登录功能&#xff1a;设计了一个结构体数组用来记录系统中所存在的人。首先设置了一个管理员身份的存放在第一行。登录的时候首先判断账号是否存在于数组当中。进行遍历数组中的所有元素的操作来进行查询&#xff0c;若是可以查询到那么就可以来判断他的密码是否…

fatal: remote error: upload-pack: not our ref (未解决问题)

PX4使用 git submodule update --init --recursive报错 fatal: remote error: upload-pack: not our ref解决办法参考&#xff1a;https://stackoverflow.com/questions/61163082/why-does-git-submodule-update-fail-with-fatal-remote-error-upload-pack-not-o 感觉就是清…

AI Agent应用落地前半场,属于企服软件厂商推出的平台级AI智能体

GPTs大受欢迎但问题多&#xff0c;企服厂商的AI Agent更被B端客户器重 比尔盖茨预言智能体是下个平台&#xff0c;超自动化平台的AI Agent更靠谱&#xff1f; 以GPTs为代表的AI Agent只是玩具&#xff1f;揭秘真实可用AI智能体长什么样 AI Agent应用落地前半场&#xff0c;属…

力扣hot100 最大子数组和 动态规划 分治 无后效性 子问题划分

&#x1f468;‍&#x1f3eb; 题目地址 无后效性 为了保证计算子问题能够按照顺序、不重复地进行&#xff0c;动态规划要求已经求解的子问题不受后续阶段的影响。这个条件也被叫做「无后效性」。换言之&#xff0c;动态规划对状态空间的遍历构成一张有向无环图&#xff0c;遍…

SRGAN 使用指南:将低分辨率图像转换为高分辨率图像

SRGAN、ESRGAN、Real-ESRGAN 使用指南 SRGAN网络结构优化目标 ESRGANReal-ESRGAN SRGAN 超分辨率&#xff1a;从低分辨率(LR)图像来估计其对应高分辨率(HR)图像的任务&#xff0c;被称作超分辨率(SR)。 SRGAN 图像超分辨率的深度学习模型&#xff0c;通过生成对抗网络&#x…

ubuntu运行风扇

su //输入密码 echo 50 > /sys/class/hwmon/hwmon1/pwm1 //执行CtrD命令退出

LeetCode(33)最小覆盖子串【滑动窗口】【困难】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 76. 最小覆盖子串 1.题目 给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串&#xff0c;则返回空字符串 "" 。 注意&#xff1a; 对于 t 中重复字…

Vim多行编辑

Vim多行编辑 Ctrlq进入多行编辑模式&#xff0c;然后上下选择要编辑的行 按下I或者Shifti&#xff0c;进入编辑模式 编辑的时候多行不会同时变化&#xff0c;不要担心&#xff0c;确实是多行编辑 编辑完成&#xff0c;想要结束多行编辑&#xff0c;按下Esc&#xff0c;此时…