深层对象转深层数组(重点:先把对象转数组,直接for in 遍历对象不太可行)
var json: {
PRow0: {
style: {
width: 10
}
},
PTable1: {
style: {
height: 20
}
}
}
const jsonToArrTree = (json) => {
let data = Object.keys(json).map( (item) => {
let ops = {
title:item,
key:nanoid(),
children:[]
}
let child = json[item]
if(typeof child == "object" && Object.keys(child).length > 0){
ops.children = jsonToArrTree(child)
}
return ops
})
return data
}
转换结果
[
{
"title": "PRow0",
"key": "LzgVGHyEkwyUAUVOSOt_u",
"children": [
{
"title": "style",
"key": "0KNgtu0C4Cg_8QalqAcTm",
"children": [
{
"title": "width",
"key": "jN4HAiWnfFXNz4csrtEQz",
"children": []
}
]
}
]
},
{
"title": "PTable1",
"key": "Y4i4tq8C12rXbH_GBtAXl",
"children": [
{
"title": "style",
"key": "2bD_q7ZfEu3yZILLsUfSn",
"children": [
{
"title": "height",
"key": "OOg79AeMP-BQoDmF7wzlX",
"children": []
}
]
}
]
}
]
每个字段都是上一级父级字段的拼接 let pre = ''
const jsonToArrTree = (json) => {
let data = Object.keys(json).map( (item) => {
pre += (pre ? '.':'') + item
let ops = {
title:pre,
key:nanoid(),
children:[]
}
let child = json[item]
console.log(pre)
if(typeof child == "object" && Object.keys(child).length > 0){
ops.children = jsonToArrTree(child)
}
return ops
})
pre = ''
return data
}
深层对象转深层数组(重点:先把对象转数组,直接for in 遍历对象不太可行)的更多相关文章
- 辨析js遍历对象与数组的方法
1 遍历对象的方法? (1) for-in(也可遍历数组,但效率较低,一般用来遍历对象) 示例: // 生成一个原型上有属性并且有可枚举属性与不可枚举属性的对象 const data = Ob ...
- 关于javascript遍历对象
1:遍历对象属性var obj={a:'aa',b:'bb'} for(var i in obj) { alert(i); //输出 a b } var obj={'a':'aa','b':'bb'} ...
- JS遍历对象的属性和值
对于需要动态获取对象的某些属性和对应的值的时候,就需要遍历对象的属性和值. const user = { name: '张三', age: 20, addr: '湖北武汉', sex: '男' } / ...
- Spring_day01--注入对象类型属性(重点)_P名称空间注入_注入复杂类型属性_IOC和DI区别_Spring整合web项目原理
注入对象类型属性(重点) Action要new一个service对象,Service中又要new一个Dao对象,现在把new的过程交给spring来操作 1 创建service类和dao类 (1)在s ...
- [原创]java WEB学习笔记59:Struts2学习之路---OGNL,值栈,读取对象栈中的对象的属性,读取 Context Map 里的对象的属性,调用字段和方法,数组,list,map
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- jquery遍历对象,数组,集合
1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTM ...
- jquery中each遍历对象和数组示例
通用遍历方法,可用于遍历对象和数组.$().each(),回调函数拥有两个参数: 第一个为对象的成员或数组的索引,第二个为对应变量或内容.如需退出each循环可使回调函数返回false 现有如下两个s ...
- jQuery遍历对象、数组、集合实例
1.jquery 遍历对象 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ...
- JS遍历对象或者数组
一.纯js实现 <script> var obj = {"player_id":"GS001","event_id":" ...
- JavaScript遍历对象4种方法和遍历数组的3种方式 代码
//遍历对象 4种方法 //Object.keys(obj).forEach() console.log("keys...遍历</br>") var obj1 = { ...
随机推荐
- Spring框架 IOC注解
Spring框架的IOC之注解方式的快速入门 1. 步骤一:导入注解开发所有需要的jar包 * 引入IOC容器必须的6个jar包 * 多引入一个:Spring ...
- Java - 框架之 Hibernate
一:hibernate.cfg.xml 配置 <!-- 1.配置数据库连接的4个参数 --> <property name="hibernate.connection.dr ...
- 2019/8/27 Test(luogu 五月天模拟赛)
\(2019/8/27\)大考 \(\color{#ff0808}{\text{初二诀别赛(SAD)}}\) 题目名称 链接 寿司 \(BSOJ5111\) 秀秀的森林 \(BSOJ5125\) 分组 ...
- 2017.10.7 国庆清北 D7T1 计数
题目描述 给出m个数a[1],a[2],…,a[m] 求1~n中有多少数不是a[1],a[2],…,a[m]的倍数. 输入输出格式 输入格式: 输入文件名为count.in. 第一行,包含两个整数:n ...
- 洛谷P1514引水入城
题目 搜索加贪心其实并不需要用到\(DP\),搜索也是比较简单地搜索. 对于每个第一行的城市进行类似于滑雪那道题的搜索,然后记录最后一行它所覆盖的区间,易得一个一行城市只会有一个区间.然后可以在最后进 ...
- 【golang】使用rpcx不指定tags报错 undefined: serverplugin.ConsulRegisterPlugin
为了避免引入不必要的库, rpcx采用了 Go 条件编译 的特性, 你可以只引入必要的特性. 比如你只使用 etcd 作为注册中心的时候, 你不希望引入 consul.zookeeper相关的库,你需 ...
- 解释下Http请求头和常见响应状态码
Accept-Charset:指出浏览器可以接受的字符编码.英文浏览器的默认值是ISO-8859-1.ccept:指浏览器或其他客户可以接爱的MIME文件格式.可以根据它判断并返回适当的文件格式. A ...
- AJAX是什么,如何使用AJAX?
ajax(异步的javascript 和xml) 能够刷新局部网页数据而不是重新加载整个网页. 第一步,创建xmlhttprequest对象,var xmlhttp =new XMLHttpReque ...
- Iptables之一基本应用
Firewall :防火墙,隔离工具 工作于主机或网络的边缘,对于进出本主机或网络的报文根据事先定义好的检查规则作匹配检测,对于能够被规则所匹配到的报文做出相应处理的组件 主机防火墙 网络防火墙 ID ...
- [luogu 3803]【模板】多项式乘法
传送门 FFT #include<bits/stdc++.h> #define ll long long #define max(a,b) ((a)>(b)?(a):(b)) #de ...