将多个 arrays 中的值存储到一个数组中 (JavaScript/Reactjs)

Question

I have an array, which is having arrays as it's values. What I need is an output that is having all array values.

Note : input array and it's elements(arrays) are not of fixed length.

Input :

array = 
[ 
  [a,b],
  [c,d,e],
  [f,g]
]

Output :

[
 {
  Header : a
  Children : 
  [
   {
    Header : c
    Children : 
     [
      Header : f
     ]
   },
  ]
 },
 {
  Header : a
  Children : 
  [
   {
    Header : c
    Children : 
     [
      Header : g
     ]
   },
  ]
 },
 {
  Header : a
  Children : 
  [
   {
    Header : d
    Children : 
     [
      Header : f
     ]
   },
  ]
 },
.
.
.
{
  Header : a
  Children : 
  [
   {
    Header : e
    Children : 
     [
      Header : g
     ]
   },
  ]
 },
 {
  Header : b
  Children : 
  [
   {
    Header : c
    Children : 
     [
      Header : f
     ]
   },
  ]
 },
 .
 .
 .
 .
 .
 {
  Header : b
  Children : 
  [
   {
    Header : e
    Children : 
     [
      Header : g
     ]
   },
  ]
 },
]

Basically it is like,

[a,c,f],
[a,c,g],
[a,d,f],
[a,d,g],
[a,e,f],
[a,e,g],
[b,c,f],
[b,c,g],
[b,d,f],
[b,d,g],
[b,e,f],
[b,e,g]

I have tried using for loop but couldn't get the desired output. Is there any way that we can achieve that result?

Answer 1

You can create a Cartesian product of the 2D array first. Then, use reduceRight to create a nested object for each array in the Cartesian product

 const data = [ ["a", "b"], ["c", "d", "e"], ["f", "g"] ] const cartesian = data.reduce((acc, curr) => acc.flatMap(c => curr.map(n => [].concat(c, n))) ) const tree = arr => arr.reduceRight((acc, Header) => acc? ({ Header, Children: [acc] }): ({ Header }), null) const output = cartesian.map(tree) console.log(JSON.stringify(cartesian)) console.log(output)

Answer 2

function join(arrayOfArrays) {
    let current = [[]];
    for (let array of arrayOfArrays) {
        current = current.flatMap(c=>array.map(a=>[...c, a]));
    }
    return current;
}