深层对象转深层数组(重点:先把对象转数组,直接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 = { ...
随机推荐
- Backpack II
Description There are n items and a backpack with size m. Given array A representing the size of eac ...
- React vs Angular vs Vue 2019
React vs Angular vs Vue 看待这三个主流框架给出的想法 Angular is the entire kitchen that gives you all the tools ne ...
- Greenplum 添加mirror步骤
原文链接:https://yq.aliyun.com/articles/695864 [TOC] 概述 新安装的greenplum集群只有primary节点,没有mirror.高可用性没得到保证.所以 ...
- Ubuntu 系统安装ssh的命令
更新源列表 打开"终端窗口",输入"sudo apt-get update"-->回车-->"输入当前登录用户的管理员密码"-- ...
- codevs:1462 素数和:给定2个整数a,b 求出它们之间(不含a,b)所有质数的和。
#include<iostream>#include<cstdio>#include<cmath>using namespace std;int main(){ i ...
- 39、Parquet数据源之自动分区推断&合并元数据
一.自动分区推断 1.概述 表分区是一种常见的优化方式,比如Hive中就提供了表分区的特性.在一个分区表中,不同分区的数据通常存储在不同的目录中, 分区列的值通常就包含在了分区目录的目录名中.Spar ...
- EasyUI日期时间框DateTimeBox
WEB DEMO 日期时间框 DateTimeBox <!DOCTYPE html> <html> <HTML> <head> <HEAD> ...
- 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. ...
- [golang][译]使用os/exec执行命令
[golang][译]使用os/exec执行命令 https://colobu.com/2017/06/19/advanced-command-execution-in-Go-with-os-exec ...
- Easytrader踩坑之旅(二)
快速阅读 用的是THSTrader进行的调试,同花须必须用8.0的. 在新的机子重新安装requirements已经调用同花顺查股票余额. 继续昨天的话费. 昨天到最后,虽然显示了余额,但是和自己帐户 ...