前端操作数据-处理后端数据整理

• 欢迎加入前端交流群来获取视频资料以及前端学习资料：749539640

当后端返回的数据不是我们需要的格式或者字段名不匹配的情况下，后端又不方便修改，前端该怎么来处理呢，下面我列出了几种情况：

一.数组对象不匹配

后端返回数据格式：

data: [
  {
    id: '003268955',
    name: 'tom',
    age: 18
  },
  {
    id: '0335689754',
    name: 'mark',
    age: 23
  }
];

• 假设：

1. 这里的id返回的类型是string，而你需要的是number类型

data = data.map(res => {
    return {
        ...res,
        id: Number(res.id)
    }
})
//输出=>
[
  { id: 3268955, name: 'tom', age: 18 },
  { id: 335689754, name: 'mark', age: 23 }
];

2.后端返回的是name字段名，而你需要的是username(这里我们直接复制出一个新的key就行，旧的key值可以保留也可删除)

//不删除旧key
data = data.map(res => {
    return {
        ...res,
        username: res.name
    }
})
//输出=>
[
  { id: '003268955', name: 'tom', age: 18, username: 'tom' },
  { id: '0335689754', name: 'mark', age: 23, username: 'mark' }
];

//删除旧key
data = data.map(res => {
   let username = res.name
   delete res.name
    return {
        ...res,
        username: username
    }
})
//输出=>
[
  { id: '003268955', age: 18, username: 'tom' },
  { id: '0335689754', age: 23, username: 'mark' }
];

3.checkbox情况，你还需要一个变量checked来处理有没有被选择的情况(初始值置为false)

data = data.map(res => {
   let username = res.name
   delete res.name
    return {
        ...res,
        checked: false
    }
})
//输出=>
[
  { id: '003268955', age: 18, checked: false },
  { id: '0335689754', age: 23, checked: false }
];

二、树状数据结构

后端返回数据：

[
  {
    title: '一号楼',
    key: '100',
    children: [
      {
        title: '一单元',
        key: '1001',
        children: [
          { title: '3405', key: '10010' },
          { title: '3302', key: '10011' }
        ]
      }
    ]
  }
];

• 假设

1.使用的树插件的key以及value字段名称是id和name；(递归方式进行替换并删除旧key)

function format(data){
  data.forEach(res=>{
    res.id = res.key;
    res.name = res.title;
    delete res.key;
    delete res.title;
    if(res.children){
      format(res.children)
    }
  })
}
format(data)

//输出==>

[
  {
    children: [
      {
        children: [
          { id: '10010', name: '3405' },
          { id: '10011', name: '3302' }
        ],
        id: '1001',
        name: '一单元'
      }
    ],
    id: '100',
    name: '一号楼'
  }
];

2.希望在最后一个节点显示前面父集的集合：一号楼一单元10010

function format(data,text){
  data.forEach(res=>{
    if(!res.children){
      res.title = text + res.title
    }
    
    if(res.children){
      text += res.title;
      format(res.children,text)
    }
  })
}
format(data,'');//初始text置为空

//输出==>
[
  {
    title: '一号楼',
    key: '100',
    children: [
      {
        title: '一单元',
        key: '1001',
        children: [
          { title: '一号楼一单元3405', key: '10010' },
          { title: '一号楼一单元3302', key: '10011' }
        ]
      }
    ]
  }
];

3.将节点进行排序

const compare = p => (m, n) => m[p] - n[p];

function format(data, key) {//key:需要排序的字段
  data.sort(compare(key));
  data.forEach(res => {
    if (!res.children) {
      return;
    } else {
      format(res.children, key);
    }
  });
}

format(data, 'title');
//输出=>
[
  {
    title: '一号楼',
    key: '100',
    children: [
      {
        title: '一单元',
        key: '1001',
        children: [
          { title: '3302', key: '10011' },
          { title: '3405', key: '10010' }
        ]
      }
    ]
  }
];