Cartesian array of objects in Javascript

Question

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' },
    ],  
  ];

Use object array to generate a new array dynamically

adiga
– adiga

2023-05-02 08:37:26 +00:00
Commented May 2, 2023 at 8:37 — adiga
– adiga, Commented May 2, 2023 at 8:37

cmgchess · Accepted Answer · 2023-05-04 04:06:17Z

2

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, value:y })))
},[[]])
 
 console.log(JSON.parse(JSON.stringify(combined)))

edited May 4, 2023 at 4:06

answered May 2, 2023 at 9:39

cmgchess

10.3k42 gold badges55 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dogbert · Accepted Answer · 2023-05-02 08:37:03Z

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' }
  ]
]

Collectives™ on Stack Overflow

Cartesian array of objects in Javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related