vue数据处理问题

Question

   let  data =  [
        {
            "id": "496c3a18-633d-4f70-a04e-250fe02fad4e",
            "templateName": "奶茶规格模板",
            "number": 0,
            "remarks": "",
            "specItems": [
                {
                    "id": "f739e351-70f7-4971-9131-0f25d4a91b66",
                    "parentId": "496c3a18-633d-4f70-a04e-250fe02fad4e",
                    "productSpecId": "e9890825-b56b-4a1d-b5cb-ff867ba9f33b",
                    "specName": "容量",
                    "specItem": "大杯,中杯,小杯",
                    "remarks": ""
                },
                {
                    "id": "9ddfdfbb-d6eb-48ee-a0cb-7fec552075b2",
                    "parentId": "496c3a18-633d-4f70-a04e-250fe02fad4e",
                    "productSpecId": "7664bad6-5240-485f-9b58-81c71da5106c",
                    "specName": "冷热",
                    "specItem": "热,常温,多冰,正常冰,少冰",
                    "remarks": ""
                },
                {
                    "id": "6f4488df-1d42-46b4-a184-7fcfe3ef3a63",
                    "parentId": "496c3a18-633d-4f70-a04e-250fe02fad4e",
                    "productSpecId": "1bd169a6-7b9a-4d38-bc7a-7daf4ab2f727",
                    "specName": "添加物",
                    "specItem": "椰果,补丁,紫米",
                    "remarks": ""
                }
            ],
            "productParams": [
                {
                    "id": "3797e3b9-34c5-4333-bc82-50bc1b8cbae6",
                    "parentId": "496c3a18-633d-4f70-a04e-250fe02fad4e",
                    "paramGroup": "参数组1",
                    "param": "参数1",
                    "isAddQuery": "1",
                    "remarks": ""
                },
                {
                    "id": "02d97450-0ca0-40fd-a02d-c50da0e8ed1f",
                    "parentId": "496c3a18-633d-4f70-a04e-250fe02fad4e",
                    "paramGroup": "参数组1",
                    "param": "参数2",
                    "isAddQuery": "1",
                    "remarks": ""
                },
                {
                    "id": "f7155281-a1e9-47fe-b705-781ae5372633",
                    "parentId": "496c3a18-633d-4f70-a04e-250fe02fad4e",
                    "paramGroup": "参数组2",
                    "param": "参数2222",
                    "isAddQuery": "1",
                    "remarks": ""
                }
            ]
        },
        {
            "id": "5d9b9914-1979-43eb-803c-88e17d4cb2f0",
            "templateName": "颜色",
            "number": 0,
            "remarks": "",
            "b2BPersistenceEntity": {
                "creator": "SU9999",
                "lastModifier": "SU9999",
                "createdTime": "2021-10-18T13:55:18.118+08:00",
                "lastModifiedTime": "2021-10-24T08:11:04.964+08:00"
            },
            "specItems": [
                {
                    "id": "b21c8edc-b41a-48f6-a6bb-c521dd4dc50e",
                    "parentId": "5d9b9914-1979-43eb-803c-88e17d4cb2f0",
                    "productSpecId": "ee7e8703-f9d4-41f0-95b2-39381d4b91bf",
                    "specName": "尺寸",
                    "specItem": "m,xl,xxl",
                    "remarks": ""
                },
                {
                    "id": "8a3c379c-5e2d-4097-b724-961a397706d2",
                    "parentId": "5d9b9914-1979-43eb-803c-88e17d4cb2f0",
                    "productSpecId": "1d57acb5-a048-4b67-be82-8dedadb7e78f",
                    "specName": "颜色",
                    "specItem": "白色,红色,黑色,紫色,蓝色,黄色,天蓝色,彩色",
                    "remarks": ""
                }
            ],
            "productParams": [
                {
                    "id": "5b2835ad-b995-4a51-9a45-60948a2bdbdc",
                    "parentId": "5d9b9914-1979-43eb-803c-88e17d4cb2f0",
                    "paramGroup": "参数组1",
                    "param": "参数1",
                    "isAddQuery": "1",
                    "remarks": ""
                },
                {
                    "id": "af67d6c3-220d-463b-af70-4f3c12589744",
                    "parentId": "5d9b9914-1979-43eb-803c-88e17d4cb2f0",
                    "paramGroup": "参数组1",
                    "param": "参数2",
                    "isAddQuery": "1",
                    "remarks": ""
                },
                {
                    "id": "7eb32874-ef2a-425d-984a-0a01b0dd8d16",
                    "parentId": "5d9b9914-1979-43eb-803c-88e17d4cb2f0",
                    "paramGroup": "参数组2",
                    "param": "尺寸",
                    "isAddQuery": "1",
                    "remarks": ""
                }
            ]
        },
        {
            "id": "042c736e-3302-48e9-89e5-d8a044d84fc3",
            "templateName": "3123213222",
            "number": 0,
            "remarks": "",
            "b2BPersistenceEntity": {
                "creator": "SU9999",
                "lastModifier": "SU9999",
                "createdTime": "2021-11-02T08:49:15.867+08:00",
                "lastModifiedTime": "2021-11-02T08:49:22.001+08:00"
            },
            "specItems": [],
            "productParams": []
        },
        {
            "id": "87c6a749-fa6c-43b9-bc64-ba66f098e989",
            "templateName": "3213222222",
            "number": 0,
            "remarks": "",
            "b2BPersistenceEntity": {
                "creator": "SU9999",
                "lastModifier": "SU9999",
                "createdTime": "2021-11-02T08:49:40.802+08:00",
                "lastModifiedTime": "2021-11-02T08:50:17.168+08:00"
            },
            "specItems": [],
            "productParams": []
        }
    ]

数据格式如上，想把每一项的specItems里面的specName添加到最外层的每一项数据里面并拼接，属性名就叫specName

输出示例：比如第0项
{

"id": "496c3a18-633d-4f70-a04e-250fe02fad4e",
"templateName": "奶茶规格模板",
"number": 0,
"remarks": "",
   "specName":"容量,冷热,添加物",
"specItems": [
    {
        "id": "f739e351-70f7-4971-9131-0f25d4a91b66",
        "parentId": "496c3a18-633d-4f70-a04e-250fe02fad4e",
        "productSpecId": "e9890825-b56b-4a1d-b5cb-ff867ba9f33b",
        "specName": "容量",
        "specItem": "大杯,中杯,小杯",
        "remarks": ""
    },
    {
        "id": "9ddfdfbb-d6eb-48ee-a0cb-7fec552075b2",
        "parentId": "496c3a18-633d-4f70-a04e-250fe02fad4e",
        "productSpecId": "7664bad6-5240-485f-9b58-81c71da5106c",
        "specName": "冷热",
        "specItem": "热,常温,多冰,正常冰,少冰",
        "remarks": ""
    },
    {
        "id": "6f4488df-1d42-46b4-a184-7fcfe3ef3a63",
        "parentId": "496c3a18-633d-4f70-a04e-250fe02fad4e",
        "productSpecId": "1bd169a6-7b9a-4d38-bc7a-7daf4ab2f727",
        "specName": "添加物",
        "specItem": "椰果,补丁,紫米",
        "remarks": ""
    }
],
"productParams": [
    {
        "id": "3797e3b9-34c5-4333-bc82-50bc1b8cbae6",
        "parentId": "496c3a18-633d-4f70-a04e-250fe02fad4e",
        "paramGroup": "参数组1",
        "param": "参数1",
        "isAddQuery": "1",
        "remarks": ""
    },
    {
        "id": "02d97450-0ca0-40fd-a02d-c50da0e8ed1f",
        "parentId": "496c3a18-633d-4f70-a04e-250fe02fad4e",
        "paramGroup": "参数组1",
        "param": "参数2",
        "isAddQuery": "1",
        "remarks": ""
    },
    {
        "id": "f7155281-a1e9-47fe-b705-781ae5372633",
        "parentId": "496c3a18-633d-4f70-a04e-250fe02fad4e",
        "paramGroup": "参数组2",
        "param": "参数2222",
        "isAddQuery": "1",
        "remarks": ""
    }
],
"index": 0

}

Answer 1

data.forEach(v => v.specName = v.specItems.map(o => o.specName).join())

Answer 2

遍历添加属性即可

for (let i = 0; i < data.length; i++) {
  const dataItem = data[i]
  const { specItems } = dataItem

  const specNames = specItems.reduce((prev, curr) => {
    return prev.concat(curr.specName)
  }, [])
  dataItem.specName = specNames.join('，')
}