Array of Objects map to grid (table) using lodash?

Question

So, let's say I have a nice flat array of objects:

let workers = [{
    name: 'Tom',
    age: 20,
    town: 'Paris'
    gender: 'M',
    position: 'DEV'
},{
    name: 'Mike',
    age: 21,
    town: 'Paris'
    gender: 'M',
    position: 'DEV'
},{
    name: 'Jake',
    age: 20,
    town: 'London'
    gender: 'M',
    position: 'DEV'
},{
    name: 'Simona',
    age: 25,
    town: 'Rome'
    gender: 'F',
    position: 'DEV'
},{
    name: 'Manuela',
    age: 20,
    town: 'Rome'
    gender: 'F',
    position: 'DEV'
},{
    name: 'Angelo',
    age: 22,
    town: 'Milan'
    gender: 'M',
    position: 'PR'
},{
    name: 'Oliver',
    age: 30,
    town: 'Berlin'
    gender: 'M',
    position: 'PR'
}];

I would like to create a grid (rows and columns) depending on my desired properties..

array2gridAll(array, rowProperty, colPropery)

let rows = array2gridAll(workers, 'position', 'town');

so the grid would be like this

|----------------------------------------------------------------------------|--------------|
|               |    Berlin   |    London    |     Milan     |     Paris     |     Rome     |
|----------------------------------------------------------------------------|--------------|
|               |      {}     |    Jake{}    |       {}      |     Tom{}     |    Simona{}  |
|       DEV     |------------------------------------------------------------|--------------|
|               |      {}     |      {}      |       {}      |     Mike{}    |   Manuela{}  |
|----------------------------------------------------------------------------|--------------|
|       PR      |   Oliver{}  |      {}      |    Angelo{}   |       {}      |      {}      |
|-------------------------------------------------------------------------------------------|

so the actual array:

rows = [
    [
        {

        },{
            name: 'Jake',
            age: 20,
            town: 'London'
            gender: 'M',
            position: 'DEV'
        {

        },{
            name: 'Tom',
            age: 20,
            town: 'Paris'
            gender: 'M',
            position: 'DEV'
        },{
            name: 'Simona',
            age: 25,
            town: 'Rome'
            gender: 'F',
            position: 'DEV'
        }
    ],
    [
        {

        },{

        },{

        },{
            name: 'Mike',
            age: 21,
            town: 'Paris'
            gender: 'M',
            position: 'DEV'
        },{
            name: 'Manuela',
            age: 20,
            town: 'Rome'
            gender: 'F',
            position: 'DEV'
        },
    ],
    [
        {
            name: 'Oliver',
            age: 30,
            town: 'Berlin'
            gender: 'M',
            position: 'PR'
        },{

        },{
            name: 'Angelo',
            age: 22,
            town: 'Milan'
            gender: 'M',
            position: 'PR'
        },{

        },{

        }
    ]
];

Hope it does make sense?

the other function would be

array2grid(array, rowProperty, rows, colPropery, cols)

let rows = array2grid(workers, 'position', ['DEV'], 'town', ['Rome', 'Paris']);

Where I would get

|------------------------------------------------|
|               |      Rome     |     Paris      |
|------------------------------------------------|
|               |     Simona{}  |     Tom{}      |
|       DEV     |--------------------------------|
|               |    Manuela{}  |     Mike{}     |
|------------------------------------------------|

rows = [
    [{
        name: 'Simona',
        age: 25,
        town: 'Rome'
        gender: 'F',
        position: 'DEV'
    },{
        name: 'Tom',
        age: 20,
        town: 'Paris'
        gender: 'M',
        position: 'DEV'
    }],
    [{
        name: 'Manuela',
        age: 20,
        town: 'Rome'
        gender: 'F',
        position: 'DEV'
    },{
        name: 'Mike',
        age: 21,
        town: 'Paris'
        gender: 'M',
        position: 'DEV'
    }]
];

Embarrassingly enough I could have developed it my self in the time I have put this question together :)

But wanted to know the cleanest way to do this?

Answer 1

No lodash. No complete table. But two approaches to reach a structured result.

1. An array with the names, as proxy for the other data.
2. An object which reflects the level.

Why an array? It works directly but it is not very versatile, because of filtering only needed rows/cols.

An object with a hierarchical structure is easier create and to filter for getting only the wanted positions or towns.

 function getGrid(array, rowKey, colKey) { var grid = [], cols = Object.create(null), rows = Object.create(null), colLength = 0, rowLength = 0; array.forEach(function (a) { var row, col; if (!(a[rowKey] in rows)) { rows[a[rowKey]] = rowLength++; } if (!(a[colKey] in cols)) { cols[a[colKey]] = colLength++; } row = rows[a[rowKey]]; col = cols[a[colKey]]; grid[row] = grid[row] || []; if (col in grid[row]) { if (!Array.isArray(grid[row][col])) { grid[row][col] = [grid[row][col]]; } grid[row][col].push(a.name); } else { grid[row][col] = a.name; } }); return grid; } function getObject(array, rowKey, colKey) { var object = {}; array.forEach(function (a) { object[a[rowKey]] = object[a[rowKey]] || {}; object[a[rowKey]][a[colKey]] = object[a[rowKey]][a[colKey]] || []; object[a[rowKey]][a[colKey]].push(a.name); }); return object; } var workers = [{ name: 'Tom', age: 20, town: 'Paris', gender: 'M', position: 'DEV' }, { name: 'Mike', age: 21, town: 'Paris', gender: 'M', position: 'DEV' }, { name: 'Jake', age: 20, town: 'London', gender: 'M', position: 'DEV' }, { name: 'Simona', age: 25, town: 'Rome', gender: 'F', position: 'DEV' }, { name: 'Manuela', age: 20, town: 'Rome', gender: 'F', position: 'DEV' }, { name: 'Angelo', age: 22, town: 'Milan', gender: 'M', position: 'PR' }, { name: 'Oliver', age: 30, town: 'Berlin', gender: 'M', position: 'PR' }]; console.log(getGrid(workers, 'position', 'town')); console.log(getObject(workers, 'position', 'town')); 

 .as-console-wrapper { max-height: 100% !important; top: 0; }