将对象数组修改为按键分组的多维数组

Question

我有两个布局场景和一组数据。这是原始数据：

var shape = [
  { name: "fruit", value: 'apple' },
  { name: "fruit", value: 'orange' },
  { name: "rootVegetable", value: 'turnip' },
  { name: "rootVegetable", value: 'carrot' },
  { name: "vegetable", value: 'cabbage' },
  { name: "vegetable", value: 'potato' }
];

这是我希望的样子：

var shape2 = [
  [
    { name: "fruit", value: 'apple' },
    { name: "rootVegetable", value: 'turnip' },
    { name: "vegetable", value: 'cabbage' },
  ],
  [
    { name: "fruit", value: 'orange' },
    { name: "rootVegetable", value: 'carrot' },
    { name: "vegetable", value: 'potato' },
  ]
]

然后我可以从中渲染 table：

| Fruit  | Root vegetable | Vegetables |
| ------ | -------------- | ---------- |
| apple  | turnip         | cabbage    |
| orange | carrot         | potato     |

我知道这是 reduce 的情况，但我不太明白。

Answer 1

你可以试试这个。

var shape = [
    { name: "fruit", value: 'apple' },
    { name: "fruit", value: 'orange' },
    { name: "rootVegetable", value: 'turnip' },
    { name: "rootVegetable", value: 'carrot' },
    { name: "vegetable", value: 'cabbage' },
    { name: "vegetable", value: 'potato' }
];
function getResult(shape) {
    var fruits = [];
    var rootVegetable = [];
    var vegetable = [];
    var result = [];

    shape.forEach(s => {
        if (s.name == "fruit")
            fruits.push(s);
        else if (s.name == "rootVegetable")
            rootVegetable.push(s);
        else if (s.name == "vegetable")
            vegetable.push(s);
    })

    fruits.forEach((item, idx) => {
        var smallArray = [];
        smallArray.push(item)
        smallArray.push(rootVegetable[idx]);
        smallArray.push(vegetable[idx]);
        result.push(smallArray);
    })

    return result;
}

console.log(getResult(shape));

将对象数组修改为按键分组的多维数组

Modify an array of objects into a multidimensional array grouped by a key

arrays

reduce

multidimensional-array