前端操作數據-處理后端數據整理

• 歡迎加入前端交流群來獲取視頻資料以及前端學習資料：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' }
        ]
      }
    ]
  }
];