vue 如何将后台返回的数据根据某个字段组成新的数组？

Question

后台取到的数据是由多个对象组成的数组：

然后我想根据里面modes字段来重新组成一个新的对象数组，如下面这样：

[
    {
        "modes": "CHARTBAR",
        "list: [
            {
              "id": 109,
              "name": "柱状图测试柱状图测试柱状图测试柱状图测试柱状图测试柱状图测试",
              "nameEn": "bar",
              "modesName": "chart-bar",
              "modes": "CHARTBAR",
              "url": "",
              "thumbnail": "",
              "style": "{\"width\":\"\",\"height\":\"\"}",
              "format": "{",
              "target": "https://www.baidu.com",
              "exts": "123",
              "type": "DATASOURCE"
            },
            {
              "id": 110,
              "name": "柱状图测试柱状图测试柱状图测试柱状图测试柱状图测试柱状图测试",
              "nameEn": "bar",
              "modesName": "chart-bar",
              "modes": "CHARTBAR",
              "url": "",
              "thumbnail": "",
              "style": "",
              "format": "",
              "target": "https://www.baidu.com",
              "exts": "123",
              "type": "DATASOURCE"
            },
        ]
    },
    ...
]

搞了半天没搞出来，求教各位老师了。

Answer 1

https://jsrun.net/6bPKp/edit

var list = [
    {
        "id": 1,
        "modes": "CHARTBAR_1",
    },
    {
        "id": 2,
        "modes": "CHARTBAR_1",
    },
    {
        "id": 3,
        "modes": "CHARTBAR_2",
    },
    {
        "id": 4,
        "modes": "CHARTBAR_2",
    },
    {
        "id": 5,
        "modes": "CHARTBAR_3",
    },
    {
        "id": 6,
        "modes": "CHARTBAR_4",
    },
    {
        "id": 7,
        "modes": "CHARTBAR_4",
    },
    {
        "id": 8,
        "modes": "CHARTBAR_1",
    },
    {
        "id": 9,
        "modes": "CHARTBAR_1",
    },
    {
        "id": 10,
        "modes": "CHARTBAR_1",
    },
]

function getListGroupBy(list, key) {
    var keysArr = list.map(item=>item[key])
    var keys = [...new Set(keysArr)]
    var newList = keys.map(item=> {
        return {
            [key]: item,
            list: list.filter(i=>i[key] == item)
        }
    })
    return newList
}

var newList = getListGroupBy(list, 'modes')
console.log(newList)

Answer 2

数据不知道该怎么去处理数据，就用 Lodash，方便。下面的示例借了 @WillisYe 的数据。

import _ from "lodash";

var list = [
    { "id": 1, "modes": "CHARTBAR_1", },
    { "id": 2, "modes": "CHARTBAR_1", },
    { "id": 3, "modes": "CHARTBAR_2", },
    { "id": 4, "modes": "CHARTBAR_2", },
    { "id": 5, "modes": "CHARTBAR_3", },
    { "id": 6, "modes": "CHARTBAR_4", },
    { "id": 7, "modes": "CHARTBAR_4", },
    { "id": 8, "modes": "CHARTBAR_1", },
    { "id": 9, "modes": "CHARTBAR_1", },
    { "id": 10, "modes": "CHARTBAR_1", },
];

var result = _(list).groupBy("modes")
    .map((list, modes) => ({ modes, list }))
    .value();

console.log(result);