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 遍历对象不太可行)的更多相关文章

  1. 辨析js遍历对象与数组的方法

    1     遍历对象的方法? (1) for-in(也可遍历数组,但效率较低,一般用来遍历对象) 示例: // 生成一个原型上有属性并且有可枚举属性与不可枚举属性的对象 const data = Ob ...

  2. 关于javascript遍历对象

    1:遍历对象属性var obj={a:'aa',b:'bb'} for(var i in obj) { alert(i); //输出 a b } var obj={'a':'aa','b':'bb'} ...

  3. JS遍历对象的属性和值

    对于需要动态获取对象的某些属性和对应的值的时候,就需要遍历对象的属性和值. const user = { name: '张三', age: 20, addr: '湖北武汉', sex: '男' } / ...

  4. Spring_day01--注入对象类型属性(重点)_P名称空间注入_注入复杂类型属性_IOC和DI区别_Spring整合web项目原理

    注入对象类型属性(重点) Action要new一个service对象,Service中又要new一个Dao对象,现在把new的过程交给spring来操作 1 创建service类和dao类 (1)在s ...

  5. [原创]java WEB学习笔记59:Struts2学习之路---OGNL,值栈,读取对象栈中的对象的属性,读取 Context Map 里的对象的属性,调用字段和方法,数组,list,map

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  6. jquery遍历对象,数组,集合

    1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTM ...

  7. jquery中each遍历对象和数组示例

    通用遍历方法,可用于遍历对象和数组.$().each(),回调函数拥有两个参数: 第一个为对象的成员或数组的索引,第二个为对应变量或内容.如需退出each循环可使回调函数返回false 现有如下两个s ...

  8. jQuery遍历对象、数组、集合实例

    1.jquery 遍历对象 复制代码代码如下:   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ...

  9. JS遍历对象或者数组

    一.纯js实现 <script> var obj = {"player_id":"GS001","event_id":" ...

  10. JavaScript遍历对象4种方法和遍历数组的3种方式 代码

    //遍历对象 4种方法 //Object.keys(obj).forEach() console.log("keys...遍历</br>") var obj1 = { ...

随机推荐

  1. UVA 1672不相交的正规表达式

    题意 输入两个正规表达式,判断两者是否相交(即存在一个串同时满足两个正规表达式).本题的正规表达式包含如下几种情况: 单个小写字符 $c$ 或:($P | Q$). 如果字符串 $s$ 满足 $P$ ...

  2. 溢出的文字隐藏(text-overflow)

    <body> <div>一定要首先强制一行内显示,再次和overflow搭配使用,三个步骤缺一不可</div> </body> <style> ...

  3. 洛谷 P1086 花生采摘 题解

    P1086 花生采摘 题目描述 鲁宾逊先生有一只宠物猴,名叫多多.这天,他们两个正沿着乡间小路散步,突然发现路边的告示牌上贴着一张小小的纸条:"欢迎免费品尝我种的花生!――熊字". ...

  4. 《挑战30天C++入门极限》理解C++面向对象程序设计中的抽象理论

        理解C++面向对象程序设计中的抽象理论 很多书在一开始就开始学习josephus问题,为了让大家前面学起来较为容易我把前面涉及到此问题的地方都故意去掉了,现在我们已经学习过了结构体和类,所以放 ...

  5. Multi-Temporal SAR Data Large-Scale Crop Mapping Based on U-Net Model(利用U-net对多时相SAR影像获得作物图)

    对哨兵1号的多时相双极化SAR数据进行预处理,得到18个日期的VV和VH共36景影像,通过ANOVA和JM距离分析,选其中ANOVA得到的F值最高的6景影像.真值用LC8数据和地面调查,目视解译得到标 ...

  6. Pytest权威教程12-跳过(Skip)及预期失败(xFail): 处理不能成功的测试用例

    目录 跳过(Skip)及预期失败(xFail): 处理不能成功的测试用例 Skip跳过用例 xFail:将测试函数标记为预期失败 Skip/xFail参数设置 返回: Pytest权威教程 跳过(Sk ...

  7. 第12组 Alpha冲刺(1/6)

    Header 队名:To Be Done 组长博客 作业博客 团队项目进行情况 燃尽图(组内共享) 展示Git当日代码/文档签入记录(组内共享) 注: 由于GitHub的免费范围内对多人开发存在较多限 ...

  8. Java 使用Jedis和RedisTemplate操作Redis缓存(SpringBoot)

    package com.example.redis.controller; import com.example.redis.entity.User; import com.example.redis ...

  9. 使用Xpose突破安卓App禁止截屏限制

    WindowManager.LayoutParams.FLAG_SECURE标志的app,这里需要注意下支付宝.网上银行类的app不建议拦截,像支付宝里的付款码,商家拿到后,直接就能扣费,不需要用户这 ...

  10. 两个Double类型相减出现精度丢失问题

    两个Double类型相减出现精度丢失问题 720.50-279.5=440.099999999 而不是440.1 解决方法,将数据库中的类型改为decimal类型,小数精确到2位