Use object array to generate a new array dynamically

Question

I have a product form which I would like users to add variants of this product to. My object for the main settings

{
  title: \'Bike\',
  settings: {
    opt         


        

Answer 1

You can create an array of title and a 2D array of values array using map. Then create a Cartesian product of all the values. Then loop through the all the combinations and create objects using reduce. Use { Image: "img.png" } as the initialValue parameter. This will work for any number of objects inside options array

const input = { title: 'Bike', settings: { options: [{ title: 'Size', values: ['60cm', '80cm', '120cm'] }, { title: 'Color', values: ['White', 'Black', 'Red'] }], variants: [] } }

const { options } = input.settings,
      titles = options.map(o => o.title),
      values = options.map(o => o.values),
      defaultObject = { Image: "img.png" }

// https://stackoverflow.com/a/57597533/3082296
const combos = values.reduce((acc, curr, i) =>
  acc.flatMap(c => curr.map(n => [].concat(c, n)))
)

const createObject = values =>
  titles.reduce((acc, k, i) => {
    acc[k] = values[i];
    return acc
  }, defaultObject)

const output = combos.map(createObject)

console.log(...output)