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. Backpack II

    Description There are n items and a backpack with size m. Given array A representing the size of eac ...

  2. React vs Angular vs Vue 2019

    React vs Angular vs Vue 看待这三个主流框架给出的想法 Angular is the entire kitchen that gives you all the tools ne ...

  3. Greenplum 添加mirror步骤

    原文链接:https://yq.aliyun.com/articles/695864 [TOC] 概述 新安装的greenplum集群只有primary节点,没有mirror.高可用性没得到保证.所以 ...

  4. Ubuntu 系统安装ssh的命令

    更新源列表 打开"终端窗口",输入"sudo apt-get update"-->回车-->"输入当前登录用户的管理员密码"-- ...

  5. codevs:1462 素数和:给定2个整数a,b 求出它们之间(不含a,b)所有质数的和。

    #include<iostream>#include<cstdio>#include<cmath>using namespace std;int main(){ i ...

  6. 39、Parquet数据源之自动分区推断&合并元数据

    一.自动分区推断 1.概述 表分区是一种常见的优化方式,比如Hive中就提供了表分区的特性.在一个分区表中,不同分区的数据通常存储在不同的目录中, 分区列的值通常就包含在了分区目录的目录名中.Spar ...

  7. EasyUI日期时间框DateTimeBox

    WEB DEMO 日期时间框 DateTimeBox <!DOCTYPE html> <html> <HTML> <head> <HEAD> ...

  8. flutter踩坑小记:The number of method references in a .dex file cannot exceed 64K.

    The number of method references in a .dex file cannot exceed 64K. 这句话的意思翻译出来是:.dex文件中的方法引用数不能超过64K. ...

  9. [golang][译]使用os/exec执行命令

    [golang][译]使用os/exec执行命令 https://colobu.com/2017/06/19/advanced-command-execution-in-Go-with-os-exec ...

  10. Easytrader踩坑之旅(二)

    快速阅读 用的是THSTrader进行的调试,同花须必须用8.0的. 在新的机子重新安装requirements已经调用同花顺查股票余额. 继续昨天的话费. 昨天到最后,虽然显示了余额,但是和自己帐户 ...