Multiply arrays of strings in javascript, not joining them at the end

Question

iam trying to create a list of products varinats from a list of selected options and options values i have data looks like this :

[
  {
   option: "size",
   selected_values: [{id: 1, value: "XL"}, {id: 2, value: "M"}]
  },
  {
   option: "color",
   selected_values: [{id: 14, value: "Red"}, {id: 15, value: "Blue"}]
  }
]

and from this data i want t create somthing like this :

[
 {
 varint_name: "XL Red",
 selected_values: [1, 14]
 },
 {
 varint_name: "XL Blue",
 selected_values: [1, 15]
 },
 {
 varint_name: "M Red",
 selected_values: [2, 14]
 },
 {
 varint_name: "M Blue",
 selected_values: [3, 15]
 }
]

taking into considration that the list of selected options and options values (first list) can be more than two objects its binded to a from so can be more or less iam using vue btw and i know that the list i want should be a computed value but i want to know the logic to genrate the desired shape of list

Please provide enough code so others can better understand or reproduce the problem. — Community, Sep 22 '22 at 14:35
similar - https://stackoverflow.com/questions/12303989/cartesian-product-of-multiple-arrays-in-javascript — James, Sep 22 '22 at 14:38

Mr. Polywhirl · Accepted Answer · 2022-09-22T16:11:52.250

As suggested, you will need to generate the Cartesian product of all option values.

I added a third option to showcase that this works for any given number of options.

const options = [{
  option: "size",
  selected_values: [
    { id: 1, value: "XL" },
    { id: 2, value: "M" }
  ]
}, {
  option: "color",
  selected_values: [
    { id: 14, value: "Red" },
    { id: 15, value: "Blue" }
  ]
}, {
  option: "length",
  selected_values: [
    { id: 30, value: "Short" },
    { id: 31, value: "Long" }
  ]
}];

const main = () => {
  const product = cartesian(...options.map(o => o.selected_values))
    .map(values => ({
      variant_name: values.map(({ value }) => value).join(' '),
      selected_values: values.map(({ id }) => id),
    }));

  console.log(product);
};

const cartesian = (...args) => {
  const result = [];
  __cartesianHelper(result, [], 0, args);
  return result;
}

const __cartesianHelper = (result, curr, index, all) => {
  for (let j = 0, l = all[index].length; j < l; j++) {
    const copy = [...curr, all[index][j]];
    if (index === all.length - 1) result.push(copy);
    else __cartesianHelper(result, copy, index + 1, all);
  }
};

main();

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

Expected Output

[{
  variant_name: "XL Red Short",
  selected_values: [1, 14, 30]
}, {
  variant_name: "XL Red Long",
  selected_values: [1, 14, 31]
}, {
  variant_name: "XL Blue Short",
  selected_values: [1, 15, 30]
}, {
  variant_name: "XL Blue Long",
  selected_values: [1, 15, 31]
}, {
  variant_name: "M Red Short",
  selected_values: [2, 14, 30]
}, {
  variant_name: "M Red Long",
  selected_values: [2, 14, 31]
}, {
  variant_name: "M Blue Short",
  selected_values: [3, 15, 30]
},  {
  variant_name: "M Blue Long",
  selected_values: [3, 15, 31]
}]

Multiply arrays of strings in javascript, not joining them at the end

1 Answers1

Expected Output