Javascript - вложенные массивы по плоскому объекту

Question

У меня есть объект с метаданными относительно позиции таблицы (строки и столбца)

 {a:{row:0,col:0,data:{}},b:{row:1,col:0,data:{}},c:{row:1,col:1,data:{}},d:{row:2,col:0,data:{}},e:{row:2,col:1,data:{}}}

Я хочу изменить порядок объектов для итерации и отобразить его как таблицу (я использую React, но это не важно).
Итак, мой конечный объект должен быть таким:

 [[{key:"a",data:{}}],[{key:"b",data:{}},{key:"c",data:{}}],[{key:"d",data:{}},{key:"e",data:{}}]]

Я пытался (много) сделать это элегантно и красиво без какого-либо успеха (результат был слишком большим для циклов), я считаю,есть какой-то элегантный способ добиться этого.

Answer 1

Просто уменьшите записи и возьмите row / col в качестве цели для вложенного массива.

var data = { a: { row: 0, col: 0, data: {} }, b: { row: 1, col: 0, data: {} }, c: { row: 1, col: 1, data: {} }, d: { row: 2, col: 0, data: {} }, e: { row: 2, col: 1, data: {} } },
    result = Object.entries(data).reduce((r, [key, { row, col, data }]) => {
        r[row] = r[row] || [];
        r[row][col] = { key, data };
        return r;
    }, []);

console.log(result);