Create product variants based on attributes

Question

I am working on an eCommerce javascript app, and trying to create product variants based on attributes.

If a product has attributes:

Size: Small, Medium, Large

Color: Red, Blue

Material: Cotton, Wool

I want result like this [{color: "Red", sizes: "Small"}, {color: "Blue", sizes: "Small"}, {color: "Red", sizes: "Medium"}, {color: "Blue", sizes: "Medium"}, {color: "Red", sizes: "Large"}, {color: "Blue", sizes: "Large"}]

I've done this, but is there an easy way to do this?

Here is the code that I've done:

let attributes = {
  color: ['Red', 'Blue'],
  sizes: ['Small', 'Medium', 'Large'],
  material: ['Cotton', 'Wool']
};

let getProducts = (arrays) => {
  if (arrays.length === 0) {
    return [[]];
  }

  let results = [];
  getProducts(arrays.slice(1)).forEach((product) => {
    arrays[0].forEach((value) => {
      results.push([value].concat(product));
    });
  });

  return results;
};

let getAllCombinations = (attributes) => {
  let attributeNames = Object.keys(attributes);
  // console.log(attributeNames);

  let attributeValues = attributeNames.map((name) => attributes[name]);
  // console.log(attributeValues);

  return getProducts(attributeValues).map((product) => {
    obj = {};
    attributeNames.forEach((name, i) => {
      obj[name] = product[i];
    });
    return obj;
  });
};

let combinations = getAllCombinations(attributes);

console.log(combinations.length);
console.log(combinations);

score 5 · Accepted Answer · answered Mar 07 '21 at 22:15

try this:

let attributes = {
  color: ['Red', 'Blue'],
  sizes: ['Small', 'Medium', 'Large'],
  material: ['Cotton', 'Wool'],
  gender: ['Men', 'Women'],
  type: ['Casual', 'Sport']
};


let attrs = [];

for (const [attr, values] of Object.entries(attributes))
  attrs.push(values.map(v => ({[attr]:v})));

attrs = attrs.reduce((a, b) => a.flatMap(d => b.map(e => ({...d, ...e}))));

console.log(attrs);

Friedrich Siever · Answer 2 · 2021-03-07T21:56:22.670

If you don't need to support ie directly you could use a combination of array.prototype.flatMap() and array.prototype.map().

    let attributes = {
      color: ["Red", "Blue"],
      sizes: ["Small", "Medium", "Large"],
    };

    const combo = attributes.color.flatMap((d) =>
      attributes.sizes.map((v) => ({ color: d, sizes: v }))
    );

    console.log(combo);

A more generic solution which uses cartesian product of arrays in vanilla JS could look like this.

 let attributes = {
    color: ['Red', 'Blue'],
    sizes: ['Small', 'Medium', 'Large'],
    material: ['Cotton', 'Wool']
  };

    const f = (a, b) => [].concat(...a.map(d => b.map(e => [].concat(d, e))));
    const cartesian = (a, b, ...c) => (b ? cartesian(f(a, b), ...c) : a);
  
  const resArr = cartesian(attributes.color, attributes.sizes, attributes.material);
   const resObj = resArr.map((x)=>({color:x[0], sizes:x[1], material: x[2]}))
  console.log(resObj);

nice but what happens if the product has more than two attributes like color, size, material? I revised my code please check again — Muhammad Taseen, Mar 07 '21 at 21:25
Then you should have a look at cartesian product of multiple arrays. I will add it to my answer. — Friedrich Siever, Mar 07 '21 at 21:51

Create product variants based on attributes

2 Answers2

Linked