He conseguido encontrar una solución a lo que planteas, que no es tan fácil como a simple vista parece. Para ello he utilizado una función de esta otra pregunta.
function combineArrays(array_of_arrays) {
function formCombination(odometer, array_of_arrays) {
return odometer.reduce(function (
accumulator,
odometer_value,
odometer_index
) {
return '' + accumulator + array_of_arrays[odometer_index][odometer_value]
},
'')
}
function odometer_increment(odometer, array_of_arrays) {
for (
let i_odometer_digit = odometer.length - 1;
i_odometer_digit >= 0;
i_odometer_digit--
) {
let maxee = array_of_arrays[i_odometer_digit].length - 1
if (odometer[i_odometer_digit] + 1 <= maxee) {
odometer[i_odometer_digit]++
return true
} else {
if (i_odometer_digit - 1 < 0) {
return false
} else {
odometer[i_odometer_digit] = 0
continue
}
}
}
}
if (!array_of_arrays) {
return []
}
if (!Array.isArray(array_of_arrays)) {
return []
}
if (array_of_arrays.length == 0) {
return []
}
for (let i = 0; i < array_of_arrays.length; i++) {
if (!Array.isArray(array_of_arrays[i]) || array_of_arrays[i].length == 0) {
return []
}
}
let odometer = new Array(array_of_arrays.length)
odometer.fill(0)
let output = []
let newCombination = formCombination(odometer, array_of_arrays)
output.push(newCombination)
while (odometer_increment(odometer, array_of_arrays)) {
newCombination = formCombination(odometer, array_of_arrays)
output.push(newCombination)
}
return output
}
Esta función recibe un array de arrays y devuelve las combinaciones posibles de ellos.
Lo que he hecho es adaptar esto al problema, para el cual he creado varias funciones, sobre todo de parseo de los objetos y de los arrays, y así ha quedado:
function optionCombinations(options) {
function getStringCombinations(options) {
let dicc = {}
for (let opt of options) {
dicc[opt.option] = opt.values.map((el) => el.value)
}
let i = 0
let arr = []
for (let key in dicc) {
let tmpArr = []
for (el of dicc[key]) {
tmpArr.push([
key,
Object.entries(dicc).length - 1 === i ? el : `${el},`,
])
}
arr.push(tmpArr)
i++
}
return combineArrays(arr)
}
function rawStringToObject(raw) {
let obj = {}
let arr = raw.split(',')
let i = 0
while (i < arr.length) {
if (i === arr.length - 1) {
break
}
obj[arr[i]] = arr[i + 1]
i += 2
}
return obj
}
let rawStringCombinations = getStringCombinations(options)
let final = []
for (let raw of rawStringCombinations) {
final.push(rawStringToObject(raw))
}
return final
}
La función optionCombinations(options)
recibe un array de objetos como el que planteas, al que he añadido otra opción más para que se vea mejor el funcionamiento del código:
let options = [
{
option: 'size',
values: [
{ value: 'small' },
{ value: 'medium' },
{ value: 'large' }
],
},
{
option: 'color',
values: [
{ value: 'white' },
{ value: 'black' },
{ value: 'blue' }
],
},
{
option: 'shape',
values: [
{ value: 'circular' },
{ value: 'triangular' },
{ value: 'quadrate' },
],
},
]
Y esta nos devolvería lo siguiente:
[
{ size: 'small', color: 'white', shape: 'circular' },
{ size: 'small', color: 'white', shape: 'triangular' },
{ size: 'small', color: 'white', shape: 'quadrate' },
{ size: 'small', color: 'black', shape: 'circular' },
{ size: 'small', color: 'black', shape: 'triangular' },
{ size: 'small', color: 'black', shape: 'quadrate' },
{ size: 'small', color: 'blue', shape: 'circular' },
{ size: 'small', color: 'blue', shape: 'triangular' },
{ size: 'small', color: 'blue', shape: 'quadrate' },
{ size: 'medium', color: 'white', shape: 'circular' },
{ size: 'medium', color: 'white', shape: 'triangular' },
{ size: 'medium', color: 'white', shape: 'quadrate' },
{ size: 'medium', color: 'black', shape: 'circular' },
{ size: 'medium', color: 'black', shape: 'triangular' },
{ size: 'medium', color: 'black', shape: 'quadrate' },
{ size: 'medium', color: 'blue', shape: 'circular' },
{ size: 'medium', color: 'blue', shape: 'triangular' },
{ size: 'medium', color: 'blue', shape: 'quadrate' },
{ size: 'large', color: 'white', shape: 'circular' },
{ size: 'large', color: 'white', shape: 'triangular' },
{ size: 'large', color: 'white', shape: 'quadrate' },
{ size: 'large', color: 'black', shape: 'circular' },
{ size: 'large', color: 'black', shape: 'triangular' },
{ size: 'large', color: 'black', shape: 'quadrate' },
{ size: 'large', color: 'blue', shape: 'circular' },
{ size: 'large', color: 'blue', shape: 'triangular' },
{ size: 'large', color: 'blue', shape: 'quadrate' }
]