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

不要bug
  • 7

拿到的数据是这样的:

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
            
        },
        {
            id: '02',
            name: 'deay',
            role_id: 1, 
            role_name: "管理员",
            org_id: 1, 
            org_name: "xx公司",
            parent_id: 0
            
        },
    ]
回复
阅读 1.2k
4 个回答

遍历list,然后再遍历list中每个对象,如果值是普通类型就直接添加到新对象上,如果是数组或者对象就继续遍历,从里面取值添加到新对象上。

const newList = list.reduce((pre, cur) => {
  const getAtt = (cur, res = {}, key = '') => {
    Object.keys(cur).map((k) => {
      if (Array.isArray(cur[k])) {
        cur[k].forEach((item) => {
          getAtt(item, res, k);
        });
      } else {
        let name = k === 'name' && key ? key + '_' + k : k;
        res[name] = cur[k];
      }
    });
    return res;
  };
  pre.push(getAtt(cur));
  return pre;
}, []);
console.log(newList);
    let lists = this.list;
    let arry = [];
    lists.forEach(v => {
      let arrtItem = {
        id: v.id,
        name: v.name,
        role_id: (v.role.map((item)=>{return item.role_id}).toString()),
        role_name: (v.role.map((item)=>{return item.name}).toString()),
        org_id: (v.org.map((item)=>{return item.org_id}).toString()),
        org_name: (v.org.map((item)=>{return item.name}).toString()),
        parent_id: (v.org.map((item)=>{return item.parent_id}).toString()),
      }
      arry.push(arrtItem)
    });
    this.list = arry
边城
  • 54.9k

如果 roleorg 这两个数组都只有一层,那会比较好办:

// 使用 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 的参数里完全解构出来:

// 在参数里使用多级构
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
        }))
    )
);
宣传栏