How to Transpose an Array of Objects in Javascript?

Question

I have this array of objects structure:

arr = [
{seat: [{available: false, id: 1},{available: false, id: 5},{available: true, id: 9},{available: true, id: 13},{available: true, id: 17},{available: true, id: 21},{available: true, id: 25},{available: true, id: 29},{available: true, id: 33},{available: true, id: 37},{available: true, id: 41}]},
{seat: [{available: true, id: 2},{available: true, id: 6},{available: true, id: 10},{available: true, id: 14},{available: true, id: 18},{available: true, id: 22},{available: true, id: 26},{available: true, id: 30},{available: true, id: 34},{available: true, id: 38},{available: true, id: 42}]},
{seat: [{available: true, id: 3},{available: false, id: 7},{available: true, id: 11},{available: true, id: 15},{available: true, id: 19},{available: true, id: 23},{available: true, id: 27},{available: true, id: 31},{available: true, id: 35},{available: true, id: 39},{available: true, id: 43}, {available: true, id: 45},{available: true, id: 47}]},
{seat: [{available: true, id: 4},{available: true, id: 8},{available: false, id: 12},{available: true, id: 16},{available: true, id: 20},{available: true, id: 24},{available: true, id: 28},{available: true, id: 32},{available: true, id: 36},{available: true, id: 40},{available: true, id: 44},{available: true, id: 46},{available: true, id: 48}]},
]

And I need to have a row of seats every 4 seats:

[
{seat: [{available: false, id: 1},{available: true, id: 2},{available: true, id: 3},{available: true, id: 4}]},
{seat: [{available: true, id: 5},{available: false, id: 6},{available: true, id: 7},{available: true, id: 8}]},
{seat: [{available: false, id: 9},{available: true, id: 10},{available: true, id: 11},{available: true, id: 12}]},
{seat: [{available: true, id: 13},{available: true, id: 14},{available: false, id: 15},{available: true, id: 16}]},
{seat: [{available: true, id: 17},{available: true, id: 18},{available: false, id: 19},{available: true, id: 20}]},
{seat: [{available: true, id: 21},{available: true, id: 22},{available: false, id: 23},{available: true, id: 24}]},
{seat: [{available: true, id: 25},{available: true, id: 26},{available: false, id: 27},{available: true, id: 28}]},
{seat: [{available: true, id: 29},{available: true, id: 30},{available: false, id: 31},{available: true, id: 32}]},
{seat: [{available: true, id: 33},{available: true, id: 34},{available: false, id: 35},{available: true, id: 36}]},
{seat: [{available: true, id: 37},{available: true, id: 38},{available: false, id: 39},{available: true, id: 40}]},
{seat: [{available: true, id: 41},{available: true, id: 42},{available: false, id: 43},{available: true, id: 44}]},
{seat: [{available: false, id: null},{available: false, id: null},{available: false, id: 45},{available: true, id: 46}]},
{seat: [{available: false, id: null},{available: false, id: null},{available: false, id: 47},{available: true, id: 48}]},
]

Notice that the third and fourth seat object has more seats than the first and second one, so in the last two seat rows from the output, it has null values because there are no seats from the first and second rows I tried this:

const transpose = (data) => {
      for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < i; j++) {
          const tmp = data[i][j];
          data[i][j] = data[j][i];
          data[j][i] = tmp;
        }
      }
    };
transpose(arr);

but that outputs everything wrong, this is for seat selection on a plane, so the database is returning every 3 columns, but to print it on a grid I need that columns to be regular rows... or maybe if you know a better way to map the seats vertically (it is an app)

Thanks in advance for your response!

Pastebin with the full structure of arrayhttps://pastebin.com/TEy9k2FB

EDIT: structure typos, pastebin with the full structure EDIT 2: changed the structure of the question, not transposing anymore

Answer 1

1. In order for this transformation matrix algorithm to work, it operates on the assumption that every "cell" is present... filled or not. I.e. every row has the same length and every column has the same length.

2. You made a small error in your code... this should be the fix(?).

Your code:

const transpose = (data) => {
      for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < i; j++) {
          const tmp = data[i][j];
          data[i][j] = data[j][i];
          data[j][i] = tmp;
        }
      }
    };
transpose(arr);

A few observations as to why it didn't work: The second loop looped up to the value of i and not the value of data[i].length. Another potential problem is how you change the values in the matrix. If you try to loop over your input data while replacing the data in the same matrix at the same time, you will ruin your input data, and thus end up with a bad matrix. Think about your algorithm with some simple data like a 2x3 matrix, and this becomes more apparent.

myArray = [["apples","apples","apples"],["bananas","bananas","bananas"], ["carrots","carrots","carrots"]]

function transpose(data)
{
  tmpAr = []
  for (let i = 0; i < data.length; i++)
  {
    tmpAr.push([]);
    for (let j = 0; j < data[i].length; j++)
    {
      tmpAr[i].push(data[j][i]);
    }
  }
  return tmpAr;
}

console.log(myArray)
console.log(transpose(myArray))

Answer 2

There are several ways to approach this. Here is a function that creates a new data structure and returns it. It first finds out what is the largest size of a seat array in the input, using Math.max. Then it creates an array with that many rows, using Array.from. Each generated row is populated with as many items as there are rows in the original data (4).

When there is no corresponding item to transpose, a default one is used instead (using ?? operator).

const transpose = arr =>
    Array.from({length: Math.max(...arr.map(({seat}) => seat.length))}, (_, i) =>
        ({ seat: arr.map(({seat}) => seat[i] ?? {available: false, id: null}) })
    );

// The sample data from the question:
const arr = [{seat: [{available: false, id: 1},{available: false, id: 5},{available: true, id: 9},{available: true, id: 13},{available: true, id: 17},{available: true, id: 21},{available: true, id: 25},{available: true, id: 29},{available: true, id: 33},{available: true, id: 37},{available: true, id: 41}]},{seat: [{available: true, id: 2},{available: true, id: 6},{available: true, id: 10},{available: true, id: 14},{available: true, id: 18},{available: true, id: 22},{available: true, id: 26},{available: true, id: 30},{available: true, id: 34},{available: true, id: 38},{available: true, id: 42}]},{seat: [{available: true, id: 3},{available: false, id: 7},{available: true, id: 11},{available: true, id: 15},{available: true, id: 19},{available: true, id: 23},{available: true, id: 27},{available: true, id: 31},{available: true, id: 35},{available: true, id: 39},{available: true, id: 43}, {available: true, id: 45},{available: true, id: 47}]},{seat: [{available: true, id: 4},{available: true, id: 8},{available: false, id: 12},{available: true, id: 16},{available: true, id: 20},{available: true, id: 24},{available: true, id: 28},{available: true, id: 32},{available: true, id: 36},{available: true, id: 40},{available: true, id: 44},{available: true, id: 46},{available: true, id: 48}]},]

const result = transpose(arr);
console.log(result);