Estoy tratando de crear una lista de variantes de productos a partir de una lista de opciones seleccionadas y valores de opciones Tengo datos que se ven así:
[
{
option: "size",
selected_values: [{id: 1, value: "XL"}, {id: 2, value: "M"}]
},
{
option: "color",
selected_values: [{id: 14, value: "Red"}, {id: 15, value: "Blue"}]
}
]
y a partir de estos datos quiero crear algo como esto:
[
{
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]
}
]
teniendo en cuenta que la lista de opciones seleccionadas y los valores de las opciones (primera lista) pueden ser más de dos objetos, está vinculado a un origen, por lo que puede ser más o menos estoy usando vue por cierto y sé que la lista que quiero debe ser un valor calculado, pero quiero saber la lógica para generar la forma deseada de la lista
Como se sugiere, deberá generar el producto cartesiano de todos los valores de las opciones.
Agregué una tercera opción para mostrar que esto funciona para cualquier cantidad de opciones.
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; }
[{
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]
}]