get a combinations from a variant object

Question

I am stuck at this, where I want to set a combination for the variant object.

the variants data is:

"Variants": [
    {
      "name": "color",
      "variants": [
        {
          "id": "e637bd15-d5e3-486b-aba3-3193cfb621bd",
          "variantName": "red"
        },
        {
          "id": "ee81a10d-5cdb-4e99-bc54-9f729025ff6b",
          "variantName": "yellow"
        }
      ],
      "id": 1
    },
    {
      "name": "size",
      "variants": [
        {
          "id": "7546d9dd-410e-4bd7-99f2-cea7b5fd558b",
          "variantName": "large"
        },
        {
          "id": "e787b3c5-45db-4502-ab1b-dfe1670814fc",
          "variantName": "small"
        }
      ],
      "id": 2
    }
  ],

I want the console to print: red/large, red/small, yellow/large, yellow/small. but instead I get:

the code I wrote is:

 const combinations = () => {
    let result = [];
    let len = data.length;
    let i, j;
    for (i = 0; i < len; i++) {
      let len2 = data[i].variants.length;
      for (j = 0; j < len2 - 1; j++) {
        result.push(
          data[j].variants[i].variantName +
            '/' +
            data[i].variants[j + 1].variantName
        );
      }
    }
    return console.log(result);
  };

where did I go wrong? what I am missing, thx in advance.

Answer 1

you can achieve this using flatMap and map.

let data =[{name:"color",variants:[{id:"e637bd15-d5e3-486b-aba3-3193cfb621bd",variantName:"red"},{id:"ee81a10d-5cdb-4e99-bc54-9f729025ff6b",variantName:"yellow"}],id:1},{name:"size",variants:[{id:"7546d9dd-410e-4bd7-99f2-cea7b5fd558b",variantName:"large"},{id:"e787b3c5-45db-4502-ab1b-dfe1670814fc",variantName:"small"}],id:2}]
  
  let a = data[0].variants.flatMap((color) => {
    return data[1].variants.map((size) => `${color.variantName}/${size.variantName}`)
  })
  console.log(a)

If you want the cartesian product when the number of arrays is not explicitly specified can do something like this reference

let data = [
    {
      "name": "color",
      "variants": [
        {
          "id": "e637bd15-d5e3-486b-aba3-3193cfb621bd",
          "variantName": "red"
        },
        {
          "id": "ee81a10d-5cdb-4e99-bc54-9f729025ff6b",
          "variantName": "yellow"
        }
      ],
      "id": 1
    },
    {
      "name": "size",
      "variants": [
        {
          "id": "7546d9dd-410e-4bd7-99f2-cea7b5fd558b",
          "variantName": "large"
        },
        {
          "id": "e787b3c5-45db-4502-ab1b-dfe1670814fc",
          "variantName": "small"
        },
                {
          "id": "e787b3c5-45dssb-4502-ab1b-dfe1670814fc",
          "variantName": "medium"
        }
      ],
      "id": 2
    },
        {
      "name": "weight",
      "variants": [
        {
          "id": "7546d9dd-410e-4bd7-99f2-cea7b5fd558b",
          "variantName": "heavy"
        },
        {
          "id": "e787b3c5-45db-4502-ab1b-dfe1670814fc",
          "variantName": "light"
        }
      ],
      "id": 3
    },
            {
      "name": "material",
      "variants": [
        {
          "id": "7546d9dd-410e-4bdhjh2-cea7b5fd558b",
          "variantName": "plastic"
        },
        {
          "id": "e787b3c5-45db-kkhkab1b-dfe1670814fc",
          "variantName": "wood"
        },
                {
          "id": "e787b3c5-45dbhhab1b-dfe1670814fc",
          "variantName": "cement"
        },
      ],
      "id": 4
    }
  ]
  
  let combined = data.reduce((a,{variants})=>{
    return a.flatMap(x=>variants.map(y=>x.concat(y.variantName)))
},[[]]).map((z) => z.join("/"))
 
 console.log(combined)