Tengo el siguiente código:
const blueData = { "items": [ { "id": 35, "revision": 1, "updatedAt": "2021-09-10T14:29:54.595012Z", }, ] } const redData = {} const greenData = { "items": [ { "id": 36, "revision": 1, "updatedAt": "2021-09-10T14:31:07.164368Z", } ] } let colorData = [] colorData = blueData.items ? [colorData, ...blueData.items] : colorData colorData = redData.items ? [colorData, ...redData.items] : colorData colorData = greenData.items ? [colorData, ...greenData.items] : colorData
Supongo que el operador de propagación no es el enfoque correcto aquí, ya que obtengo algunas matrices adicionales en mi matriz colorData
final. Simplemente quiero construir una sola matriz de 'elementos' que contenga todos los 'elementos' de los 3 objetos.
Aquí hay un enlace a ese código en la consola es6: https://es6console.com/ktkhc3j2/
Coloque sus datos en una matriz y luego use flatMap
para desenvolver cada .items
:
[greenData, redData, blueData].flatMap(d => d.items ?? []) //=> [ {id: 36, revision: 1, updatedAt: '2021-09-10T14:31:07.164368Z'} //=> , {id: 35, revision: 1, updatedAt: '2021-09-10T14:29:54.595012Z'}]
Si te apetece, puedes abstraer d => d.items ?? []
con un poco de curry (sin juego de palabras;)
const take = k => o => o[k] ?? [];
Lo que nos da:
[greenData, redData, blueData].flatMap(take('items'))
Incluso podemos ir un paso más allá si alguna vez necesita repetir este proceso con diferentes claves:
const concatBy = fn => xs => xs.flatMap(x => fn(x));
Ahora casi se siente como si estuviera expresando su intención con palabras en lugar de código:
const takeItems = concatBy(take('items')); takeItems([greenData, redData, blueData]); //=> [ {id: 36, revision: 1, updatedAt: '2021-09-10T14:31:07.164368Z'} //=> , {id: 35, revision: 1, updatedAt: '2021-09-
Construyamos otra función:
const takeFood = concatBy(take('food')); takeFood([{food: ['🥑', '🥕']}, {food: ['🌽', '🥦']}]); //=> ['🥑', '🥕', '🌽', '🥦']
Apéndice
Esto solo pretende ser un material de aprendizaje potencialmente útil. Mi consejo es usar flatMap
.
Este:
[[1, 2], [3, 4]].flatMap(x => x) //=> [1, 2, 3, 4]
También se puede expresar con reduce
. Ligeramente más detallado pero hace lo que dice en la lata:
[[1, 2], [3, 4]].reduce((xs, x) => xs.concat(x), []) //=> [1, 2, 3, 4]
Entonces, para decirlo simplemente, también podrías hacer:
[greenData, redData, blueData].reduce((xs, x) => xs.concat(x.items ?? []), [])
Puede hacer esto usando el Logical OR operator
que le permite proporcionar un valor predeterminado si falta el campo de items
.
const blueData = { items: [ { id: 35, revision: 1, updatedAt: '2021-09-10T14:29:54.595012Z', }, ], }; const redData = {}; const greenData = { items: [ { id: 36, revision: 1, updatedAt: '2021-09-10T14:31:07.164368Z', }, ], }; const colorData = [ ...(blueData.items || []), ...(redData.items || []), ...(greenData.items || []), ]; console.log(colorData);
Tal vez soy un poco anticuado, pero usaría concat
para eso:
El método concat() se utiliza para fusionar dos o más matrices. Este método no cambia las matrices existentes, sino que devuelve una nueva matriz. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
const blueData = { "items": [ { "id": 35, "revision": 1, "updatedAt": "2021-09-10T14:29:54.595012Z", }, ] } const redData = {} const greenData = { "items": [ { "id": 36, "revision": 1, "updatedAt": "2021-09-10T14:31:07.164368Z", } ] } const colorData = [].concat(blueData.items,redData.items,greenData.items).filter(x => x) console.log(colorData)
el último filter
es para eliminar valores indefinidos