js数组数据格式的处理(CRM后管)

在做后台管理系统的过程中,可能会遇到很多后端返回的数据格式不太符合前端的渲染需求,这时候,我们可能就需要对数据格式进行处理.

下面是联调过程中遇到的几种数据格式需要处理的情况.记录一下.

后端返回的树形数据结构,最后一个节点没有数据,多了一个空的children:[]

后端返回的数据格式如下:

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
32
33
34
35
36
37

{
    "code": "0",
    "message": "成功",
    "result": [
        {
            "id": 1,
            "parentId": 461,
            "code": "short",
            "name": "短险项目",
            "type": "leads_business_type",
            "isEffect": "true",
            "children": [
                {
                    "id": 5,
                    "parentId": 1,
                    "code": "short_kaisen_telemarketing",
                    "name": "电销业务",
                    "type": "leads_reach_type",
                    "isEffect": "true",
                    "children": [
                        {
                            "id": 12,
                            "parentId": 5,
                            "code": "AXCRGSMARTCALL",
                            "name": "爱心筹智能外呼转人工外呼",
                            "type": "leads_reach_type",
                            "isEffect": "true",
                            "children": []
                        }
                    ]
                }
            ]
        }

    ]
}

如果不做对应的数据出来,这里渲染的时候,由于最后一个是空数组,所有多出一块.如图所示:

控制台测试对比图

删除树形结构最后一个 children 为空数组的值:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 删除 树形结构 最后一个children为空数组的值.
const deleteChildren = (arr) => {
  let childs = arr;
  for (let i = childs.length; i--; i > 0) {
    if (childs[i].children) {
      if (childs[i].children.length) {
        deleteChildren(childs[i].children);
      } else {
        delete childs[i].children;
      }
    }
  }
  return arr;
};

如下格式,又有的接口返回的数据格式,最后一项有的没有children返回的为null

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

{
    "code": "0",
    "message": "成功",
    "result": [
        {
            "id": 6,
            "parentId": null,
            "code": "000154",
            "name": "华泰",
            "type": null,
            "isEffect": null,
            "children": [
                {
                    "id": null,
                    "parentId": 6,
                    "code": "HTM01",
                    "name": "华泰安康百万医疗险月缴版(HTM01)",
                    "type": null,
                    "isEffect": null,
                    "children": null
                },
                {
                    "id": null,
                    "parentId": 6,
                    "code": "HTY01",
                    "name": "华泰安康百万医疗险年缴版(HTY01)",
                    "type": null,
                    "isEffect": null,
                    "children": null
                },
                {
                    "id": null,
                    "parentId": 6,
                    "code": "HTSZ",
                    "name": "华泰善诊(HTSZ)",
                    "type": null,
                    "isEffect": null,
                    "children": null
                },
                {
                    "id": null,
                    "parentId": 6,
                    "code": "HTHYWZ",
                    "name": "300元咨询问诊服务(HTHYWZ)",
                    "type": null,
                    "isEffect": null,
                    "children": null
                }
            ]
        }
    ]

}

处理渲染树形所需要的数据结构方法:(Antd 也默认提供了对应的 API),也可以自己处理.

Antd中组件Cascader级联选择提供了fieldName可以进行配置,自定义 options 中 label name children 的字段

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
const dataFormat = (arr) => {
  let newArr = [];
  if (arr != undefined && arr.length > 0) {
    newArr = arr.map((item) => {
      item.label = item.name;
      item.value = item.code;
      if (item.children != undefined && item.children.length > 0) {
        dataFormat(item.children);
      }
      return item;
    });
  }
  return deleteChildren(newArr);
};

// 删除 树形结构 最后一个children为空数组的值.
const deleteChildren = (arr) => {
  let childs = arr;
  for (let i = childs.length; i--; i > 0) {
    if (childs[i].children) {
      if (childs[i].children.length) {
        deleteChildren(childs[i].children);
      } else {
        delete childs[i].children;
      }
    }
  }
  return arr;
};

删除 树形结构 最后一个 children 为 null 的值

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
// 数据结构如下:
[
  {
    "id": 1,
    "parentId": null,
    "code": "000179",
    "orginName": null,
    "name": "众安服销",
    "type": null,
    "isEffect": null,
    "isPartChoose": null,
    "children": [
      {
        "id": 22,
        "parentId": 1,
        "code": "ww8325b98edd2d9602",
        "orginName": null,
        "name": "健康险-众安健康服销",
        "type": null,
        "isEffect": null,
        "isPartChoose": null,
        "children": null
      }
    ]
  },
  {
    "id": 2,
    "parentId": null,
    "code": "DX",
    "orginName": null,
    "name": "电信",
    "type": null,
    "isEffect": null,
    "isPartChoose": null,
    "children": [
      {
        "id": 17,
        "parentId": 2,
        "code": "com.aibang.dxwd",
        "orginName": null,
        "name": "电信团队",
        "type": null,
        "isEffect": null,
        "isPartChoose": null,
        "children": null
      },
      {
        "id": 18,
        "parentId": 2,
        "code": "com.aibang.hhwd",
        "orginName": null,
        "name": "暖哇瀚海bpo",
        "type": null,
        "isEffect": null,
        "isPartChoose": null,
        "children": null
      },
      {
        "id": 19,
        "parentId": 2,
        "code": "com.aibang.qwwd",
        "orginName": null,
        "name": "暖哇人工企微",
        "type": null,
        "isEffect": null,
        "isPartChoose": null,
        "children": null
      }
    ]
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
// 删除 树形结构 最后一个children为null的值.
const deleteChildren = (arr) => {
  let childs = arr;
  for (let i = childs.length; i--; i > 0) {
    if (childs[i].children) {
      deleteChildren(childs[i].children);
    } else {
      delete childs[i].children;
    }
  }
  return arr;
};

根据父级选项的选择项,查找对应的子级选项.

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
{
  "code": "0",
  "message": "成功",
  "result": [
    {
      "id": 51,
      "parentId": 464,
      "code": "16",
      "name": "S类",
      "type": "leads_first_catalog",
      "isEffect": "true",
      "children": [
        {
          "id": 53,
          "parentId": 51,
          "code": "15",
          "name": "在保",
          "type": "leads_second_catalog",
          "isEffect": "true",
          "children": []
        },
        {
          "id": 58,
          "parentId": 51,
          "code": "AS1",
          "name": "AS1",
          "type": "leads_second_catalog",
          "isEffect": "true",
          "children": []
        },
        {
          "id": 59,
          "parentId": 51,
          "code": "AS2",
          "name": "AS2",
          "type": "leads_second_catalog",
          "isEffect": "true",
          "children": []
        },
        {
          "id": 60,
          "parentId": 51,
          "code": "AS3",
          "name": "AS3",
          "type": "leads_second_catalog",
          "isEffect": "true",
          "children": []
        },
        {
          "id": 61,
          "parentId": 51,
          "code": "AS4",
          "name": "AS4",
          "type": "leads_second_catalog",
          "isEffect": "true",
          "children": []
        },
        {
          "id": 62,
          "parentId": 51,
          "code": "AS5",
          "name": "AS5",
          "type": "leads_second_catalog",
          "isEffect": "true",
          "children": []
        },
        {
          "id": 63,
          "parentId": 51,
          "code": "AS6",
          "name": "AS6",
          "type": "leads_second_catalog",
          "isEffect": "true",
          "children": []
        },
        {
          "id": 64,
          "parentId": 51,
          "code": "AY1",
          "name": "AY1",
          "type": "leads_second_catalog",
          "isEffect": "true",
          "children": []
        },
        {
          "id": 65,
          "parentId": 51,
          "code": "AY2",
          "name": "AY2",
          "type": "leads_second_catalog",
          "isEffect": "true",
          "children": []
        },
        {
          "id": 66,
          "parentId": 51,
          "code": "AY3",
          "name": "AY3",
          "type": "leads_second_catalog",
          "isEffect": "true",
          "children": []
        }
      ]
    }
  ]
}

当选择线索一级的时候,查找其对应的线索二级进行赋值.

1
2
3
4
5
6
7
8
9
10
11
12
const getSecondCateList = (val) => {
  form.setFieldsValue({
    dataThirdId: null,
  });
  const secondCateArr =
    (leadsCatalog &&
      leadsCatalog.find((item) => {
        return item.code == val;
      })?.children) ||
    [];
  setSecondCatalog(secondCateArr);
};

另外在处理表单数据提交的时候,有时候是组合数据,我们可能要拆分或者删除某些字段,如果项目中有引入lodash库,可以使用其提供的对应方法.

1
2
3
4
5
6
import { omit } from "lodash";

var object = { a: 1, b: "2", c: 3 };

omit(object, ["a", "c"]);
// => { 'b': '2' }