数据格式转换js如何将对象嵌套的数组数据取出来加到对象里，数据格式转换[{[],[]},{[],[]}] 转[{},{}]

Posted 2023-02-18 Ly_cat

在前后分离的大背景下，前端数据渲染过程中，有时候后端返回的数据结构并不是前端需要的格式，如果后端不处理，这个时候就需要前端自己处理。

假如拿到的数据是这样的：

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
        ))
    )
);