Cascader 级联选择器的数据是后端返回的 但是数据是好几个不同的接口 怎样拼接成需要的数据

Question

Cascader 级联选择器的数据是后端返回的 但是数据是好几个不同的接口 怎样拼接成需要的数据

Answer 1

Cascader 数据结构无非是树形的数据结构。

我先假设你有两个关联的数据接口。（后端老哥应该有设置表之间的关联）

例如：

接口1：

var a = [
  {id:16, name:"数码",productCount:1},
  {id:17, name:"衣服",productCount:1},
]

接口2：

var b = [
  {id:1, parentId:16, name:"手机"},
  {id:2, parentId:17, name:"外套"},
  {id:3, parentId:16, name:"电脑"},
  {id:4, parentId:16, name:"耳机"},
]

用例：
a数组的id 和 b数组的parentId 是关联的，所以我们可以

b.forEach(o => {
  const item = a.find(({id}) => id === o.parentId)
  item && item.children ? item.children.push(o) : item.children = [o]
})

console.log(a);

[
  {
    "id": 16,
    "name": "数码",
    "productCount": 1,
    "children": [
      {
        "id": 1,
        "parentId": 16,
        "name": "手机"
      },
      {
        "id": 3,
        "parentId": 16,
        "name": "电脑"
      },
      {
        "id": 4,
        "parentId": 16,
        "name": "耳机"
      }
    ]
  },
  {
    "id": 17,
    "name": "衣服",
    "productCount": 1,
    "children": [
      {
        "id": 2,
        "parentId": 17,
        "name": "外套"
      }
    ]
  }
]