Tengo una matriz de objetos que tiene una de las propiedades ( "attributes" ) como matriz de objetos.
var products = [ { "productId": "1", "attributes": [ { "variant":"red", "price": "134.00" } ] }, { "productId": "2", "attributes": [ { "variant": "green", "value": "3400.00" }, { "variant": "pink", "price": "342.00" } ] } ]Quiero que la matriz anidada de objetos se aplane y se copie en el elemento principal, pero el objeto principal debe duplicarse para cada uno de los objetos anidados. (No estoy seguro si lo he explicado correctamente).
La matriz de objetos convertida debe ser:
var transformedProducts = [ { "productId": "1", "variant":"red", "price": "134.00" }, { "productId": "2", "variant": "green", "value": "3400.00" }, { "productId": "2", "variant": "pink", "price": "342.00" } ] Puedo mapear sobre la matriz externa y luego nuevamente mapear sobre la matriz interna, y en el mapa más interno, construir un nuevo objeto.
¿Hay un enfoque mejor o más funcional para esto?
Puede usar Array.flatMap() para iterar los objetos y luego iterar los attributes con Array.map() y combinarlos con el resto del objeto. Array.flatMap() también aplanaría la matriz de matrices en una sola matriz.
const fn = arr => arr.flatMap(({ attributes, ...rest }) => attributes.map(o => ({ ...rest, ...o })) ) const products = [{"productId":"1","attributes":[{"variant":"red","price":"134.00"}]},{"productId":"2","attributes":[{"variant":"green","value":"3400.00"},{"variant":"pink","price":"342.00"}]}] const result = fn(products) console.log(result) Con Ramda, puede iterar y aplanar la matriz usando R.chain . Para obtener una matriz de atributos combinados con sus padres, puede usar R.ap como combinador de dos funciones:
const { chain, ap, pipe, prop, applyTo, omit, mergeRight, map } = R const fn = chain(ap( pipe(prop('attributes'), applyTo), pipe(omit(['attributes']), mergeRight, map) )) const products = [{"productId":"1","attributes":[{"variant":"red","price":"134.00"}]},{"productId":"2","attributes":[{"variant":"green","value":"3400.00"},{"variant":"pink","price":"342.00"}]}] const result = fn(products) console.log(result) <script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.28.0/ramda.min.js" integrity="sha512-t0vPcE8ynwIFovsylwUuLPIbdhDj6fav2prN9fEu/VYBupsmrmk9x43Hvnt+Mgn2h5YPSJOk7PMo9zIeGedD1A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>Puede usar Array#map y Array#flat de la siguiente manera:
const products = [ { "productId": "1", "attributes": [ { "variant":"red", "price": "134.00" } ] }, { "productId": "2", "attributes": [ { "variant": "green", "value": "3400.00" }, { "variant": "pink", "price": "342.00" } ] } ]; const output = products.map(({productId,attributes}) => attributes.map(({variant,price}) => ({productId,variant,price})) ) .flat(); console.log( output ); O solo para nombrar attributes , en caso de que haya otras propiedades:
const products = [ { "productId": "1", "attributes": [ { "variant":"red", "price": "134.00" } ] }, { "productId": "2", "attributes": [ { "variant": "green", "value": "3400.00" }, { "variant": "pink", "price": "342.00" } ] } ]; const output = products.map(({attributes,...rest}) => attributes.map(attribute => ({...rest,...attribute})) ) .flat(); console.log( output );Este código debería funcionar para usted:
const transformedProducts = []; products.forEach((product) => { product.attributes.forEach((attribute) => { transformedProducts.push({ productId: product.productId, ...attribute, }); }); });