avatar

each article in page.posts.data
前端数据操作

在与后端联调的时候,经常会遇到数据格式与自己之前mock的不太一样的情况,后端又不方便修改,前端该怎么来处理呢

下面我列出了几种情况:
欢迎加入前端交流群:749539640

一.数组对象不匹配

后端返回数据格式:

1
2
3
4
5
6
7
8
9
10
11
12
data: [
{
id: '003268955',
name: 'tom',
age: 18
},
{
id: '0335689754',
name: 'mark',
age: 23
}
];
  • 假设:
  1. 这里的id返回的类型是string,而你需要的是number类型
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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值可以保留也可删除)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    //不删除旧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)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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 }
    ];

    二、树状数据结构

    后端返回数据:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    [
    {
    title: '一号楼',
    key: '100',
    children: [
    {
    title: '一单元',
    key: '1001',
    children: [
    { title: '3405', key: '10010' },
    { title: '3302', key: '10011' }
    ]
    }
    ]
    }
    ];
  • 假设

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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.将节点进行排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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' }
]
}
]
}
];
文章作者: 王志超
文章链接: http://wangzc.wang/2019/08/09/formatData/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 王志超的博客
打赏
  • 支付寶
    支付寶
  • 微信
    微信

评论