1

Tengo un array en que almaceno dos objetos que a su vez comprenden un "nombre" y un array de valores, lo que deseo es combinar sus valores.

El array es el siguiente

let options = [
    {
        option: 'size',
        values: [
            {value: 'small'},
            {value: 'medium'},
            {value: 'large'}
        ]
    },
    {
        option: 'color',
        values: [
            {value: 'white'},
            {value: 'black'},
            {value: 'blue'}
        ]
    }
]

Entonces lo que busco es combinar los valores, tal forma que el resultado sea el siguiente.

let final = [
    {size: 'small', color: 'white'},
    {size: 'small', color: 'black'},
    {size: 'small', color: 'blue'},
    {size: 'medium', color: 'white'},
    {size: 'medium', color: 'black'},
    {size: 'medium', color: 'blue'},
    {size: 'large', color: 'white'},
    {size: 'large', color: 'black'},
    {size: 'large', color: 'blue'}
]

Cabe destacar que la propiedad option no siempre será "size" o "color", por lo que en la lógica para la combinación, las propiedades debería lucir algo similar a ésto:

newArray.push({[option.otion]: value.value})
1
  • Hola, ¿Qué has intentado para resolver el problema? el 14 nov. 2021 a las 23:05

1 respuesta 1

1

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' }
]

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.