how to create combination of product variations in react?

Question

I have react E-Commerce website and products have variations, and each variation value has a uniqe key like size : large small color: red green blue
i want to create combination of them(no repeat), and render some inputs to fill their stock sku price properities.
combinatios have unicode which is combined by values unicode.
there is a example to understand my problem.

variations state (Array 3)

const productVariations = [
    {
        name: "color",
        values: [
            {
                value: "red",
                unicode: "lEdfB"
            },
            {
                value: "green",
                unicode: "bRGJI"
            },
            {
                value: "blue",
                unicode: "uQWGQ"
            }
        ]
    },
    {
        name: "size",
        values: [
            {
                value: "Large",
                unicode: "yHoBC"
            },
            {
                value: "Small",
                unicode: "KRjlO"
            }
        ]
    },
    {
        name: "type",
        values: [
            {
                value: "A",
                unicode: "wiDOv"
            },
            {
                value: "B",
                unicode: "ycEkt"
            }
        ]
    }
]

expecting combinations array(12)

[
    {
        combName: "red | Large | A",
        combUnicode: "lEdfByHoBCwiDOv",
        stock: 0,
        sku: 0,
        price: 0
    },
    {
        "combName": "red | Large | B",
        "combUnicode": "lEdfByHoBCycEkt",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "red | Small | A",
        "combUnicode": "lEdfBKRjlOwiDOv",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "red | Small | B",
        "combUnicode": "lEdfBKRjlOycEkt",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "green | Large | A",
        "combUnicode": "bRGJIyHoBCwiDOv",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "green | Large | B",
        "combUnicode": "bRGJIyHoBCycEkt",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "green | Small | A",
        "combUnicode": "bRGJIKRjlOwiDOv",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "green | Small | B",
        "combUnicode": "bRGJIKRjlOycEkt",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "blue | Large | A",
        "combUnicode": "uQWGQyHoBCwiDOv",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "blue | Large | B",
        "combUnicode": "uQWGQyHoBCycEkt",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "blue | Small | A",
        "combUnicode": "uQWGQKRjlOwiDOv",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "blue | Small | B",
        "combUnicode": "uQWGQKRjlOycEkt",
        "stock": 0,
        "sku": 0,
        "price": 0
    }
]

My Code

useEffect(() => {
    
    const combinations = [];
    const combination = { combName: "", combUnicode: "", stock: 0, sku: 0, price: 0 };

// loop through all values of first variation

    if (productVariations.length > 0) {
      const firstVariationName = productVariations[0].name;
      productVariations[0].values.forEach((value) => {

        productVariations.forEach((variation) => {

          if (variation.name !== firstVariationName) {    //we dont want red | red or red | green  combination
            variation.values.forEach((val) => {
              combination.combName = value.value + " | " + val.value;
              combination.combUnicode = value.unicode + val.unicode;
              combinations.push({ ...combination });
            });
          }
        });
      });
      
    }

    
    console.log("combinations:", combinations);
  },[productVariations]);

My result which isn't true

[
    {
        "combName": "red | Small",
        "combUnicode": "ZifKNZNDPd",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "red | Large",
        "combUnicode": "ZifKNXLMsW",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "red | A",
        "combUnicode": "ZifKNjJrEr",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "red | B",
        "combUnicode": "ZifKNxERMC",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "green | Small",
        "combUnicode": "uyoQQZNDPd",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "green | Large",
        "combUnicode": "uyoQQXLMsW",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "green | A",
        "combUnicode": "uyoQQjJrEr",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "green | B",
        "combUnicode": "uyoQQxERMC",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "blue | Small",
        "combUnicode": "RzgknZNDPd",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "blue | Large",
        "combUnicode": "RzgknXLMsW",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "blue | A",
        "combUnicode": "RzgknjJrEr",
        "stock": 0,
        "sku": 0,
        "price": 0
    },
    {
        "combName": "blue | B",
        "combUnicode": "RzgknxERMC",
        "stock": 0,
        "sku": 0,
        "price": 0
    }
]

i need a solution to create combinations array from variations with expecting structure .

You're loooking for the [cartesian product](https://stackoverflow.com/questions/12303989/cartesian-product-of-multiple-arrays-in-javascript) — pilchard, Sep 03 '22 at 09:53
Does this answer your question? [Cartesian product of multiple arrays in JavaScript](https://stackoverflow.com/questions/12303989/cartesian-product-of-multiple-arrays-in-javascript) — pilchard, Sep 03 '22 at 09:54
Another example [How to implement cartesian product of n array with different lenghts in javascript?](https://stackoverflow.com/questions/26040964/how-to-implement-cartesian-product-of-n-array-with-different-lenghts-in-javascri) — pilchard, Sep 03 '22 at 09:55

score 0 · Accepted Answer · answered Sep 03 '22 at 12:48

As pilchard mentioned, you need to use cartesian as the core function. I just added this implementation for your case.

const productVariations = [{name: "color",values: [{value: "red",unicode: "lEdfB"},{value: "green", unicode: "bRGJI"},{value: "blue",unicode: "uQWGQ"}]},{name: "size",values: [{value: "Large",unicode: "yHoBC"},{value: "Small",unicode: "KRjlO"}]},{name: "type",values: [{value: "A",unicode: "wiDOv"},{value: "B",unicode: "ycEkt"}]}];

const cartesian = (...a) => a.reduce((a, b) => a.flatMap(d => b.map(e => [d, e].flat())));
  
const productValues = productVariations.map(({values}) => values);
const permutations = cartesian(...productValues)
  .map(e => ({
    combName: e.map(({ value }) => value).join(' | '),
    combUnicode: e.map(({ unicode }) => unicode).join(''),
    stock: 0,
    sku: 0,
    price: 0
  }));

console.log(permutations);

.as-console-wrapper { max-height: 100% !important; top: 0 }

how to create combination of product variations in react?

variations state (Array 3)

expecting combinations array(12)

My result which isn't true

1 Answers1