【数据格式转换】js如何将对象嵌套的数组数据取出来加到对象里,数据格式转换[{[],[]},{[],[]}] 转[{},{}]
在前后分离的大背景下,前端数据渲染过程中,有时候后端返回的数据结构并不是前端需要的格式,如果后端不处理,这个时候就需要前端自己处理。
假如拿到的数据是这样的:
list:[{id: '01',name: 'saly',role: [{role_id: 1, name: "管理员", status: 1}],org: [{org_id: 1, name: "xx公司", parent_id: 0, status: 1, remark: ""}]},{id: '02',name: 'deay',role: [{role_id: 1, name: "管理员", status: 1}],org: [{org_id: 1, name: "xx公司", parent_id: 0, status: 1, remark: ""}]}]
但是这个不是你要的数据结构,想把对象里嵌套的数组全部的数据取出来加到一级对象上
需求:就是遍历所有对象,把对象里所有数组的属性和值取出来,加到对象上
转换之后的格式是这样的:
list:[{id: '01',name: 'saly',role_id: 1, role_name: "管理员",org_id: 1, org_name: "xx公司",parent_id: 0,status: 1,remark: ""},{id: '02',name: 'deay',role_id: 1, role_name: "管理员",org_id: 1, org_name: "xx公司",parent_id: 0,status: 1,remark: ""},]
简单版:
可以利用es6的赋值解构来处理,转换方法:
list.map(item => {const {role: [{ role_id, name: role_name } = {}],org: [{ org_id, name: org_name, ...otherOrg }],...other} = item;return {...other,role_id,role_name,org_id,org_name,...otherOrg}
})
详细版:
如果 role
和 org
这两个数组都只有一层,那会比较好办:
1. 使用 IIFE 进行二级解构
const result = list.map(({ role, org, ...rest }) => ({...rest,...(({ role_id, name }) => ({ role_id, role_name: name }))(role[0]),...(({ org_id, name, parent_id }) => ({ org_id, org_name: name, parent_id }))(org[0]),
}));
或者直接在 map callback
的参数里完全解构出来:
2. 在参数里使用多级构
const result = list.map(({role: [{ role_id, name: role_name }],org: [{ org_id, name: org_name, parent_id }],...rest
}) => ({ ...rest, role_id, role_name, org_id, org_name, parent_id }));
如果 role
和 org
可能是多个,那么问题来了……是需要做交叉展开吗?如果需要,那至少需要两层 flatMap
const result = list.flatMap(({ role, org, ...rest }) => {return role.flatMap(({ role_id, name: role_name }) => {return org.map(({ org_id, name: org_name, parent_id }) => ({...rest,role_id, role_name,org_id, org_name, parent_id}));});
});
Lambda
代码块里只有一句 return
的情况下,可以去掉 return
,改为表达式(为了可读性,可以在 =>
后面折行+缩进)
const result = list.flatMap(({ role, org, ...rest }) =>role.flatMap(({ role_id, name: role_name }) =>org.map(({ org_id, name: org_name, parent_id }) => ({...rest,role_id, role_name,org_id, org_name, parent_id})))
);
【数据格式转换】js如何将对象嵌套的数组数据取出来加到对象里,数据格式转换[{[],[]},{[],[]}] 转[{},{}]相关推荐
- js 快速找出两个数组中的不同元素或对象
js 快速找出两个数组中的不同元素 var arr1 = [0,1,2,3,4,5]; var arr2 = [0,4,6,1,3,9]; function getArrDifference(arr1 ...
- JS案例——找出两个数组中的不同元素或对象、数组去重
一.找出两个数组中的不同元素或对象 1. 数据 var arr1 = ["张瑞淑", "徐海涛", "谢岗岗", "薛鹏" ...
- 【ES6】es6数组中对象去重,数组对象去重方法总结---filter()与reduce()实践
es6数组中对象去重 方法一: filter()与findIndex()给数组去重 1. filter()用法 2. findIndex()用法 3. 去重实战 方法二:reduce()去重 1. r ...
- js遍历多层嵌套对象存在的JSO数据
js获取含有多层嵌套对象的JSON数据,主要应用迭代的思想. 该案例需要获取jsonData中的所有属性值. <!DOCTYPE> <html> <head>< ...
- 前端:JS/28/CSS DOM动态样式(style对象,style 对象属性与CSS属性的转换),Event DOM,事件对象简介(DOM和IE中的Event对象),实例:点出满天小星星
CSS DOM动态样式 使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...
- 嵌套地狱_解决嵌套业务逻辑_使用Js的对象_避免数组嵌套---SpringCloud Alibaba_若依微服务框架改造_ElementUI---工作笔记016
今天做个业务,有同事来问我,说有个业务,比如: 1.有建筑, 2.建筑中有几号楼, 3.几号楼中有几单元, 4.几单元中有几层, 5.几层中有几个房间 他要用个5维数组来做...最终,做到最后说,麻烦 ...
- java集合转js数值_前端js调用接口转换Map数组数据
返回Map数据 后端接口返回数据格式 { "code": 1, "msg": "操作成功!", "count": 0, ...
- Java、JS解析JSON对象、JSON数组
一:三种JSON格式 基本类型 {"student": "张三","age": 18,"sex": true } 数组类 ...
- JavaScript基础07-day09【嵌套for循环、break和continue、对象、数据类型、对象字面量、函数】
学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
最新文章
- Golang 随机获取本机可用端口
- 数字图像处理中常用的插值方法
- C#托管代码与C++非托管代码互相调用一(C#调用C++代码.net 代码安全)
- yum时报Error: rpmdb open failed解决方法
- 使用Django Rest Framework和React构建Moodle / Blackboard克隆
- 内置函数enumerate()使用
- iOS开发UI篇—APP主流UI框架结构
- 这些大佬告诉你,在先进计算与AI领域该往哪个方向冲!
- 1725.可以形成最大正方形的矩阵数目
- js 关闭子页面刷新父页面
- nodejs爬虫实战(一):抽屉新热榜
- 怎么给PDF文档加页码,PDF文档加页码的方法
- Win7如何查看自己得Win7版本号
- GBase 8s分布式功能之异地容灾
- Swift教程-视频拍摄教程
- Google Authenticator 原理及Java实现
- idea配置maven并用maven打包
- Allegro,如何编辑修改已放置器件封装中单个焊盘
- 来用 TypeScript(技术周刊 2019-04-01)
- 图片预览-放大镜效果
热门文章
- 小兵大乱斗服务器维修吗,《小兵大乱斗》进阶指南:从零开始的老司机套路
- 国家计算机一级字处理怎么过?
- vue element-UI前端分页
- VS2019 C++ 编译项目错误:无法打开包括文件:“graphics.h”: No such file or directory
- 高性能集群解决方案系列(一)之问题初探
- Android 的定位分层架构
- 中e管家小额资金理财技巧大全
- Redis基础及与spring的整合总结
- 马尔可夫链蒙特卡罗算法(MCMC方法)
- vscode更换主题的插件_vscode插件开发:定制 vscode 主题插件扩展