turn a flat array into cell like objects for a grid

Udders 0
Viewed 35

I have an array that looks like similar to this,

[
    ['column1', 'column2', 'column3', 'column4', 'column5'],
    ['2column1', '2column2', '2column3', '2column4', '2column5']
]

I wanting to turn this array into table that looks similar to this,

header1 header2 header3 header4 header5
column1 column2 column3 column4 column5
2column1 2column2 2column3 2column4 2column5

I want to turn array above into an array of objects if possible that would look like this,

[
   [
       { col:a, row: 1, cell_value: 'column1'},
       { col:b, row: 1, cell_value: 'column2'},
       { col:c, row: 1, cell_value: 'column3'},
       { col:d, row: 1, cell_value: 'column4'},
       { col:e, row: 1, cell_value: 'column5'}
    ],
    [
       { col:a, row: 2, cell_value: '2column1'},
       { col:b, row: 2, cell_value: '2column2'},
       { col:c, row: 2, cell_value: '2column3'},
       { col:d, row: 2, cell_value: '2column4'},
       { col:e, row: 2, cell_value: '2column5'}
    ]
]

I have a function to create the column letters,

export const columnToLetter = (column) => {
    let temp, letter = '';
    while (column > 0) {
        temp = (column - 1) % 26;
        letter = String.fromCharCode(temp + 65) + letter;
        column = (column - temp - 1) / 26;
    }
    return letter;
}

and this is my attempt to create the above array objects,

const data = payload.formatted_values.map((value, index) => {
            let columnCount = 0;
            while (columnCount <= payload.formatted_values.length) {
                const singleCell = {
                    col: columnToLetter(index+1),
                    row: columnCount+1,
                    cell_value: value[columnCount]
                }
                columnCount++;
                return singleCell;
            }
            
        });

But the output I get is incorrect, I get this structure,

{col: 'A', row: 1, cell_value: 'Fav'}
{col: 'B', row: 1, cell_value: 'red'}
{col: 'C', row: 1, cell_value: ''}

Which is not what I want, can any advise how I would turn the flat array I start with into a object with the attributes I want?

ecmascript-6 object json arrays javascript
4 Answers

You could map a nested result.

const
    data = [['column1', 'column2', 'column3', 'column4', 'column5'], ['2column1', '2column2', '2column3', '2column4', '2column5']],
    result = data.map((a, row) => a.map((cell_value, col) => ({
        col: (col + 10).toString(36).toUpperCase(),
        row: row + 1,
        cell_value
    })));
    
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Nina Scholz0

You could just loop over it like so:

function makeColumn(arr)
    {
      var outArr = []
      var rowCounter = 0
      var cCounter = 97
      arr.forEach((item,index) => {
        outArr.push([])
        item.forEach((i2,ind2) => {
            outArr[index].push({
                col:String.fromCharCode(cCounter++), 
                row: rowCounter, 
                cell_value: arr[rowCounter][ind2]
            })
          })
        rowCounter++
        cCounter = 97
      })
      return outArr
    }
quandale dingle0

Using for and map()

const data = [
  ['column1', 'column2', 'column3', 'column4', 'column5'],
  ['2column1', '2column2', '2column3', '2column4', '2column5']
]


const res = []

for (let i = 0; i < data.length; i++) {
  res.push(data[i].map((item, index) => {
    return { col: String.fromCharCode(index+97), row: i+1, cell_value: item }
  }))
}

console.log(res)

GrafiCode0

You can simply achieve this by just using Array.map() method.

Live Demo :

const arr = [
  ['column1', 'column2', 'column3', 'column4', 'column5'],
  ['2column1', '2column2', '2column3', '2column4', '2column5']
];

const res = arr.map((elem, index) => {
  return elem.map((col, i) => {
    return {
      col: String.fromCharCode(97 + i),
      row: index + 1,
      cell_value: col
    }
  })
});

console.log(res);

Rohìt Jíndal0
Related