Cartesian array of objects in Javascript

dacoten
May 2, 2023
165 views
0 votes
2 Answers

I have been working on a Cartesian product with a below array of objects.

[
    {
        "name": "Size",
        "values": ["10", "39"]
    },
    {
        "name": "Color",
        "values": ["Yellow", "Pink"]
    },
    {
        "name": "Country",
        "values": ["USA", "UK"]
    }
]

And I want to generate a cartesian product of the properties so that the output is an array of the following form:

[
    [
      { id: 1, name: 'Size', value: '10' },
      { id: 2, name: 'Color', value: 'Yellow' },
      { id: 3, name: 'Country', value: 'USA' },
    ],
    [
      { id: 1, name: 'Size', value: '10' },
      { id: 2, name: 'Color', value: 'Yellow' },
      { id: 3, name: 'Country', value: 'UK' },
    ],
    [
      { id: 1, name: 'Size', value: '39' },
      { id: 2, name: 'Color', value: 'Yellow' },
      { id: 3, name: 'Country', value: 'USA' },
    ],
    [
      { id: 1, name: 'Size', value: '39' },
      { id: 2, name: 'Color', value: 'Yellow' },
      { id: 3, name: 'Country', value: 'UK' },
    ],
    [
      { id: 1, name: 'Size', value: '10' },
      { id: 2, name: 'Color', value: 'Pink' },
      { id: 3, name: 'Country', value: 'USA' },
    ],
    [
      { id: 1, name: 'Size', value: '10' },
      { id: 2, name: 'Color', value: 'Pink' },
      { id: 3, name: 'Country', value: 'UK' },
    ],
    [
      { id: 1, name: 'Size', value: '39' },
      { id: 2, name: 'Color', value: 'Pink' },
      { id: 3, name: 'Country', value: 'USA' },
    ],  
    [ 
      { id: 1, name: 'Size', value: '39' },
      { id: 2, name: 'Color', value: 'Pink' },
      { id: 3, name: 'Country', value: 'UK' },
    ],  
  ];

Answers

Here’s one concise way to do this with recursion:

const f = (xs, i = 1) =>
  xs.length === 0
    ? [[]]
    : f(xs.slice(1), i + 1).flatMap(y =>
        xs[0].values.map(value => [{ id: i, name: xs[0].name, value }, ...y]),
      )

console.log(
  f([
    {
      name: 'Size',
      values: ['10', '39'],
    },
    {
      name: 'Color',
      values: ['Yellow', 'Pink'],
    },
    {
      name: 'Country',
      values: ['USA', 'UK'],
    },
  ]),
)

Output:

[
  [
    { id: 1, name: 'Size', value: '10' },
    { id: 2, name: 'Color', value: 'Yellow' },
    { id: 3, name: 'Country', value: 'USA' }
  ],
  [
    { id: 1, name: 'Size', value: '39' },
    { id: 2, name: 'Color', value: 'Yellow' },
    { id: 3, name: 'Country', value: 'USA' }
  ],
  [
    { id: 1, name: 'Size', value: '10' },
    { id: 2, name: 'Color', value: 'Pink' },
    { id: 3, name: 'Country', value: 'USA' }
  ],
  [
    { id: 1, name: 'Size', value: '39' },
    { id: 2, name: 'Color', value: 'Pink' },
    { id: 3, name: 'Country', value: 'USA' }
  ],
  [
    { id: 1, name: 'Size', value: '10' },
    { id: 2, name: 'Color', value: 'Yellow' },
    { id: 3, name: 'Country', value: 'UK' }
  ],
  [
    { id: 1, name: 'Size', value: '39' },
    { id: 2, name: 'Color', value: 'Yellow' },
    { id: 3, name: 'Country', value: 'UK' }
  ],
  [
    { id: 1, name: 'Size', value: '10' },
    { id: 2, name: 'Color', value: 'Pink' },
    { id: 3, name: 'Country', value: 'UK' }
  ],
  [
    { id: 1, name: 'Size', value: '39' },
    { id: 2, name: 'Color', value: 'Pink' },
    { id: 3, name: 'Country', value: 'UK' }
  ]
]

here is a non-recursive solution based on a previous answer

const data = [
    {
        "name": "Size",
        "values": ["10", "39"]
    },
    {
        "name": "Color",
        "values": ["Yellow", "Pink"]
    },
    {
        "name": "Country",
        "values": ["USA", "UK"]
    }
]


const combined = data.reduce((a,{name,values},i)=>{
    return a.flatMap(x =>  values.map(y=> x.concat({ id: i + 1, name: name, value: y })))
},[[]])
 
 console.log(JSON.parse(JSON.stringify(combined)))

Please signup or login to give your own answer.

Click here to cancel reply.