js把属性具有父子关系的json文件转变成json树

js 解析 json 生成树 都已经封装好了,只需要在test.html里面传递JSON的格式数据就可以了,节点动态生成。 立即下载

方法也是百度来的,亲测可用

希望能帮助到大家

<script>
		var data = [{
			"address": "芜湖弋江区",
			"id": "1",
			"latitude": 31.379996,
			"longitude": 118.424139,
			"name": "测试站点1",
			"pId": "SK",
			"siteClass": "DQ",
			"siteType": "SK",
			"updateDataTime": "2018-10-19 00:00:00"
		}, {
			"address": "芜湖三山区",
			"id": "2",
			"latitude": 31.369996,
			"longitude": 118.414139,
			"name": "测试站点2",
			"pId": "GK",
			"siteClass": "DQ",
			"siteType": "GK",
			"updateDataTime": "2018-10-19 00:00:00"
		}, {
			"id": "GK",
			"name": "国控",
			"pId": "0"
		}, {
			"id": "SK",
			"name": "省控",
			"pId": "0"
		}]

		function toTree(data) { // 删除 所有 children,以防止多次调用 
			data.forEach(function(item) {
				delete item.children;
			}); // 将数据存储为 以 id 为 KEY 的 map 索引数据列
			var map = {};
			data.forEach(function(item) {
				map[item.id] = item;
			}); //        console.log(map); 
			var val = [];
			data.forEach(function(item) { // 以当前遍历项,的pid,去map对象中找到索引的id 
				var parent = map[item.pId]; // 好绕啊,如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中
				if(parent) {
					(parent.children || (parent.children = [])).push(item);
				} else { //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中,作为顶级 
					val.push(item);
				}
			});
			return val;
		}
		console.log(toTree(data))
	</script>

 

简单js使用json数据 写成的一棵树 该代码很简单,你只需了解简单的js就可以很快写出一棵自己的书,因为简单,如果你需要,你值的拥有 立即下载

相关推荐

画个板子玩一玩STM32F030F4P6,也许是最便宜的32bit MCU

前言,什么是STM32F030F4P6 STM32目前最便宜的芯片之一应该就是这一块,STM32F030F4P6,这一个芯片没有USB,但是其他都有,引脚少,价格低廉,如果找不到原厂,可以买替代的国产芯片,性能也一样。 不管怎么样也是Cortex-M0,比8bit和16bit的性能都强,总的来说就是低价,引脚少,体积小的同时,还容易开发,有很多模拟输入可玩,还有SPI,硬件I2C等等 所以,这一款MCU真的是从理论来说又便宜又好用,非常适合把玩。 画个板,最小系统 STM32F030其..

arenascat的博客 2万+

从json数据中,通过递归相应关系筛选子父级关系,实现树组件渲染。

从json数据中,通过递归相应关系筛选子父级关系,实现树组件渲染。 描述:公司项目先是实现了 这样的一个树,数据的格式都是后端老哥在数据库里递归查询返回的,数据格式类似: data: [{ id: 1, label: ‘一级 1’, children: [{ id: 4, label: ‘二级 1-1’, children: [{ id: 9, label: ‘三级 1-1-1’ }, { id: 10, label: ‘三级 1-1-2’ }] }] }, { id: 2, label: ‘一级 2’,

qq_46017430的博客 666

【智能车学习】电磁循迹中的基本控制算法

今天心血来潮,突然想总结一下电磁车的一些基本算法,也希望可以给新手同学们一点帮助和参考。本篇主要讲述智能车电磁循迹中涉及到的基本算法,包括滤波算法,归一化算法,PID控制等

Carry_qing的博客 6万+

JSON数据转成树结构

JSON数据转成树结构

Alice_LiLi的博客 3469

手把手教你用Ubuntu Desktop搭建个人L2TP服务器,手机电脑都能连(Network Manager配置详解)

本文详细介绍了在Ubuntu Desktop上使用Network Manager图形化配置L2TP服务器的方法,实现手机、电脑等多设备安全连接。从环境准备、图形界面设置到各平台客户端配置,提供一站式解决方案,并包含常见问题排查与安全增强措施,帮助用户快速搭建个人远程访问网络。

weixin_30555125的博客 124

宏基因组分析|完整分析流程梳理

今天先从最基础的全流程框架说起,无论是刚接触的萌新,还是想查漏补缺的同行,都能找到有用的信息。

weixin_70911870的博客 3165

js把json数据转化成树形数据

/** * 将id、parentId这种JSON数组的数据格式转换为树节点格式 * @param {Array} arr * @param {String} id * @param {String} pid * @return {Array} */ function arrayToTree(arr, id, pid) { let data = JSON.parse(JSON.s...

qq_18932003的博客 1803

Python多版本共存指南:用CMD命令一键切换3.6和3.8解释器(含pip使用技巧)

本文详细介绍了在Windows CMD环境下实现Python多版本(如3.6和3.8)共存与一键切换的完整方案。通过文件重命名策略、环境变量优化和自定义脚本,开发者可快速切换Python解释器版本,并管理各版本独立的pip依赖库,确保项目环境隔离与兼容性。

weixin_29035405的博客 423

多叉树结合JavaScript树形组件实现无限级树形结构(一种构建多级有序树形结构JSON(或XML)数据源的方法)

一、问题研究的背景和意义 在Web应用程序开发领域,基于Ajax技术的JavaScript树形组件已经被广泛使用,它用来在Html页面上展现具有层次结构的数据项。目前市场上常见的JavaScript框架及组件库中均包含自己的树形组件,例如jQuery、Ext JS等,还有一些独立的树形组件,例如dhtmlxTree等,这些树形组件完美的解决了层次数据的展示问题。展示离不开数据,树形组件主要利用Ajax技术从服务器端获取数据源,数据源的格式主要包括JSON、XML等,而这些层次数据一般都存储在数据库中。“无限

bigtree2099的博客 1447

yolov8涨点系列之替换幽灵卷积GhostConv

yolov8涨点系列之替换幽灵卷积GhostConv

zhang1379的博客 3566

【知识图谱】实践篇——基于知识图谱的《红楼梦》人物关系可视化及问答系统实践:part1项目介绍与环境准备

看到这篇文章的你,相信对知识图谱相关概念不在陌生。知识图谱相关内容在实际开发中包含两个部分:1.知识图谱构建,2.知识图谱使用。知识图谱构建过程中涉及内容、技术都比较多。知识图谱的应用也逐渐在我们的生活中随处可见,其中基于知识图谱的问答系统就是其中的一个应用。基于知识图谱的问答系统称做KGQA(knowledge graph question answer),也有人称其为KBQA(knowledge based question answ).基于知识图谱的问答系统通常是使用的是领域知识图谱。下面就结合Git

让算法融入生活,改变生活! 4720

把JSON格式的数据转化为树结构

Vue把JSON数据做成树结构 在工作中,我们常常会遇到下面的问题,就是把数据转换成树结构来展示或者处理,这个时候就需要对JSON格式的数据进行转化,话不多说,直接上代码。 <script> getTreeData() { let dataArray = []; this.setTree.forEach((data) => { let parentId = data.parentId; if (parentId ===

m0_56856837的博客 4285

高频仿真:高频天线设计_(4).天线参数分析与优化

通过上述步骤,我们展示了如何综合使用解析方法、数值优化方法和实验数据来设计和优化一个高效宽带天线。首先,我们通过解析方法确定了天线的初步长度;然后,使用遗传算法优化了天线的直径以最大化增益;最后,通过实验数据验证了天线的性能,包括驻波比和带宽。这一综合性方法可以有效地提升天线的设计和优化效果,确保其在实际应用中表现出色。

2401_87715305的博客 925

原生js读取json文件

1.首先编写一个json文件:demo.json [ { "name":"张三", "sex":"男", "email":"zhangsan@123.com" }, { "name":"李四", "sex":"男", "email":"lisi@123.com" }, { "name":"王五", "sex":"女", "email":"wangwu@123.com...

ClearLoveQ的博客 7万+

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

js读写json文件

js读json文件: <div> <input type="file" id="files"/> </div> <script> var inputElement = document.getElementById("files"); inputElement.addEventListener("change", ha...

mini_1251861209的博客 1万+

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

JavaScript读取JSON文件

JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串。有关于json的相关信息,可参考:json百度百科。 1、HTML文档 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;R

Bruce_wjh的博客 5万+

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

【JavaScript】JS对象和JSON

var perStr='{"属性名":"属性值","属性名":"属性值","属性名":{},"属性名":["","",""],"属性名":[{},{},{}]}'3、创建数组并初始化:new Array("one","two",2) ,可简写: var 数组名=[元素,...]9、数组.splice(start,deleteCount,[添加的元素,...])---删除或删除添加原数组元素。1、数组1.concat(数组2)---返回数组1和数组2合并后的新数组。

想做职场小白吗? 我来教您....... 3220

JavaScript读取json文件

JavaScript 对象与 JSON 对象的区别:在 JavaScript 中,对象的属性名称可以用单引号 ‘’ 或双引号 “” 括起来,也可以完全省略引号。但是,在 JSON 中,所有属性名称都必须用双引号括起来。使用JavaScript函数JSON.parse() 将文本转换成JavaScript对象。来将 json对象转化为json字符串。在Vue.js中首选将json文件引入。

weixin_43956958的博客 1872

JavaScript的DOM树、json

一、DOM树 1.组成 ECMAScript描述了javascript语言的语法和基本对象 文档对象模型DOM(Document Object Model)与HTML网页API接口 浏览器对象模型BOM(Browser Object Model),与浏览器进行交互的API接口 核心对象有:window浏览器窗口,navigator浏览器信息,location浏览器当前地址信息,history浏览器历史信息,screen用户屏幕信息。 2.DOM树结构 DOM 是一项 W3C (World Wide W

G-Y的博客 325

JavaScript——DOM编程、JS的对象和JSON

JavaScript——DOM编程、JS的对象和JSON

雷神乐乐的博客 1546

JavaScript查询Json 树

JavaScript查询Json 树 getNode (json, key, nodeId) { // 1.第一层 root 深度遍历整个JSON var result = null for (var i = 0; i &lt; json.length; i++) { var obj = json[i] // 没有就下一个 ...

weixin_38202190的博客 577

【伸手党福利】js将父子关系树的对象转为json串【vue】

在antdesignvue当中,经常需要为树形选择器赋值DataSource,但是数据库里只会存储每条数据的父子关系, 这里提供一个简单封装的转换函数,以备调用。 /utils/useage.js当中: 注意:这里是将对象中的PARENT_ID和ID这两个字段建立父子关系,根据数据库传参请自行修改。 export function toTree(data) { let result = [] if (!Array.isArray(data)) { return result } d

wwppp987的博客 445

读取json本地js处理输出html,JavaScript 通过浏览器导出和读取本地 JSON 文件

最近我准备给我的博客主题增加一个备份主题配置的功能,我使用的方案是通过导出主题的设置来备份。因为不需要导入数据库,所以可以直接通过 JS 获取表单内容,然后导出为 JSON。导入配置也是直接读取本地的 JSON 文件,然后根据 JSON 的配置信息设置表单。这里就简单写一下 JS 导出和读取文本文件。导出我需要实现的效果是点击导出后弹出一个文件下载对话框,点击 保存 或 下载 就可以导出文件。在 ...

weixin_39722196的博客 1035

JSON——JS

文章目录JSON的产生JSON特点JS分为两类:JSON中允许的值:将js字符串转换为JS对象注意(1)`eval()`:这个函数可以用来执行一段字符串形式的JS代码,并将执行结果返回(2) 引入一个 json2.js 外部文件——推荐的使用方式 JSON的产生 JS中的对象只有JS自己认识,如果想要把数据传递给其他语言,则需要类型转换。通常将对象转换为一个字符串。 JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别,并且可以转换为任意语言中的对象. JSON特点 JS的全称 Javascr

mantou_riji的博客 3213

JavaScript JSON

js对象、js json

西电卢本伟的博客 1155

js中给json对象添加新的属性

1、现有一个json对象为jsonObj,需要给这个对象添加新的属性newParam,同时给newParam赋值为pre。做法如下: var jsonObj={       'param1':22,       'param2' :33 }; jsonObj. newParam ='pre'; 新的属性添加以后,json对象变成: var jsonObj={       'para...

mdjfk的博客 3万+
上一篇: Java简单excel表格,超级简单的方法
下一篇: Java多线程callable
Yuwen_forJava
博客等级 码龄9年 28粉丝 90原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值