Grouping arrays and 2D arrays into a single 2D array with the same length for all

Question

The final result must always contain 6 values in each index:

[
   [value_1,value_2,value_3,value_4,value_5,value_6],
   [value_1,value_2,value_3,value_4,value_5,value_6]
]

Position of the values:

Object	Positions
menu	value_1
home_team	value_2 and value_3
empty array	value_4
away_team	value_5 and value_6

Possible arrays can be:

Object	Option 1	Option 2
menu	[]	[[-],[-],[-],[-],...]
home_team	[]	[[-,-],[-,-],[-,-],[-,-],...]
empty array	[]
away_team	[]	[[-,-],[-,-],[-,-],[-,-],...]

function if_empty(the_list) {
  if (the_list.length > 0) {
    return the_list
  } else {
    return [[null,null]]
  }
}

function group_arrays() {
  const menu = [
    ['abcd'],
    ['1234']
  ];

  const home_team = [];
  const ht = if_empty(home_team);

  const away_team = [
    ['val1', '0001'],
    ['val2', '0002'],
    ['val3', '0003']
  ];
  const at = if_empty(away_team);

  const collection = [menu, ht, [], at];
  const output = Array(Math.max(...collection.map((a) => a.length)))
    .fill()
    .map((_, i) => collection.flatMap((a) => a[i]));

  Logger.log(output)
}

But as you can see, index 0 has 6 values and the others have only 5:

[
  [abcd, null, null, null, val1, 0001],
  [1234, null, null, val2, 0002],
  [null, null, null, val3, 0003]
]

But I need that regardless of where values are missing, they must always be aligned with 6 values each:

[
  [abcd, null, null, null, val1, 0001],
  [1234, null, null, null, val2, 0002],
  [null, null, null, null, val3, 0003]
]

What should I readjust in my code to get around this problem?

I notice that the cause of this is in the 2D arrays that when they don't have values, they only generate 1 empty value instead of 2 empty values as expected by me.

Answer 1

Modification points:

• In your script, for example, the value of let collection = [menu, ht, [], at];is [[["abcd"],["1234"]],[[null,null]],[],[["val1","0001"],["val2","0002"],["val3","0003"]]] . In this case, Math.max(...collection.map((a) => a.length)) is 3 .
• When your script of const output = Array(Math.max(...collection.map((a) => a.length))).fill().map((_, i) => collection.flatMap((a) => a[i])); is run, at collection.flatMap((a) => a[i])) , when i is 0 , ["abcd"] , [null,null] , null , ["val1","0001"] are used. By this, 6 elements are included.
• When your script of const output = Array(Math.max(...collection.map((a) => a.length))).fill().map((_, i) => collection.flatMap((a) => a[i])); is run, at collection.flatMap((a) => a[i])) , when i is 1 , ["1234"] , null , null , ["val2","0002"] are used. By this, 5 elements are included.
  • I thought that this might be the reason for your issue.

If my understanding is correct, I thought that in your script, it might be required to expand collection of let collection = [menu, ht, [], at]; to the same length for each element.

When these points are reflected in your script, it becomes as follows.

Modified script:

 function if_empty(the_list) { if (the_list.length > 0) { return the_list } else { return [[null, null]] } } function group_arrays() { const menu = [ ['abcd'], ['1234'] ]; const home_team = []; const ht = if_empty(home_team); const away_team = [ ['val1', '0001'], ['val2', '0002'], ['val3', '0003'] ]; const at = if_empty(away_team); // --- I modified below script. let collection = [menu, ht, [], at]; const maxLen = Math.max(...collection.map((a) => a.length)); collection = collection.map(a => a.length != maxLen ? [...a, ...Array(maxLen - a.length).fill([...Array(a[0] ? a[0].length : 0)].fill(null))] : a); // --- const output = Array(Math.max(...collection.map((a) => a.length))) .fill() .map((_, i) => collection.flatMap((a) => a[i].length == 0 ? null : a[i])); console.log(output) } group_arrays();

• In this modification, in my modified script, [[["abcd"],["1234"]],[[null,null]],[],[["val1","0001"],["val2","0002"],["val3","0003"]]] is converted to [[["abcd"],["1234"],[null]],[[null,null],[null,null],[null,null]],[[],[],[]],[["val1","0001"],["val2","0002"],["val3","0003"]]] . By this, your expected values are retrieved.

Testing:

When the above script is run, you can see the following value at the log.

[
  ["abcd",null,null,null,"val1","0001"],
  ["1234",null,null,null,"val2","0002"],
  [null,null,null,null,"val3","0003"]
]

Answer 2

You can try setting the inner array length rowLength as a property of the specific array object like home_team and access it in if_empty and insert null array accordingly:

 /*<ignore>*/console.config({maximize:true,timeStamps:false,autoScroll:false});/*</ignore>*/ const if_empty = /*modified*/(the_list, rowLength) => the_list ? the_list : Array(rowLength).fill(null); function group_arrays() { const menu = [['abcd'], ['1234']], home_team = [], away_team = [ ['val1', '0001'], ['val2', '0002'], ['val3', '0003'], ], collection = [menu, home_team, [], away_team]; /*modified*/home_team.rowLength = 2; const output = Array.from( Array(Math.max(...collection.map((a) => a.length))), (_, i) => collection.flatMap((a) => /*modified*/if_empty(a[i], a.rowLength)) ); console.log(output); } group_arrays();

 <!-- https://meta.stackoverflow.com/a/375985/ --> <script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script>