请求到的数据怎么把内层数据渲染到和外层数据是同一级(标签-数据结构)

Question

请求到的的数据结构是下面的样子 ，想要把manageInfos数组中的数据 渲染到和serviceName为同一级

{
        "id": 2,
        "serviceName": "酒驾1",
        "serverIp": "localhost",
        "url": "http://localhost:8080/#/home/addPage",
        "intranet": 1,
        "serviceEnable": true,
        "manageInfos": [
          {
            "id": 2,
            "serviceId": 2,
            "manageName": "a",
            "managePhone": "111"
          }
        ]
      },

想要实现的效果就是下图所示

希望大家能给我这个小嫩丁解惑一下 ，先谢过!

Answer 1

有几层遍历几层啊，下层能得到上层的数据不就能渲染了吗

  const items = [{
    "id": 2,
    "serviceName": "酒驾1",
    "serverIp": "localhost",
    "url": "http://localhost:8080/#/home/addPage",
    "intranet": 1,
    "serviceEnable": true,
    "manageInfos": [
      {
        "id": 2,
        "serviceId": 2,
        "manageName": "a",
        "managePhone": "111"
      },
      {
        "id": 1,
        "serviceId": 1,
        "manageName": "b",
        "managePhone": "222"
      },
    ]
  }, {
    "id": 2,
    "serviceName": "酒驾2",
    "serverIp": "localhost",
    "url": "http://localhost:8080/#/home/addPage",
    "intranet": 1,
    "serviceEnable": true,
    "manageInfos": [
      {
        "id": 3,
        "serviceId": 3,
        "manageName": "c",
        "managePhone": "333"
      },
      {
        "id": 4,
        "serviceId": 4,
        "manageName": "d",
        "managePhone": "444"
      },
    ]
  }]

  items.map(item => {
    const { manageInfos, ...other } = item
    manageInfos.map(manageInfo => {
      console.log({ ...other, ...manageInfo })
    })
  })