Tengo esta matriz de objetos, que he mapeado a través de ella para obtener su contenido como
const teamSliderContent = [ { Describtion1: 'Chef. Mordy Wenk', Title: 'Head of the Chief staff.', id: 1, }, { Describtion1: 'Chef. Mark Brunnett', Title: 'Junior chef.', id: 2, }, { Describtion1: 'Chef. Griffin Zach', Title: 'a Talented Chef.', id: 3, }, { Describtion1: 'Chef. Will Smith', Title: 'a Talented Chef.', id: 4, }, ];y así es como lo mapeé:
{teamSliderContent.map(item => ( <p>{item}</p> ))}y quiero mapear esta matriz de objetos dentro de la matriz anterior
const pizzaSlicesContent = [ { sliceUp: 'https://user-images.githubusercontent.com/86873404/169595266-b0085f5c-cdd9-4f96-93b0-49edcc08fa72.png', id: 1, }, { sliceLeft: 'https://user-images.githubusercontent.com/86873404/169595240-fe7f4c80-c8c3-44f6-9cc8-4fec55587f87.png', id: 2, }, { sliceDown: 'https://user-images.githubusercontent.com/86873404/169595250-a5692462-8aec-43f8-91a8-a042d9dd35db.png', id: 3, }, { sliceRight: 'https://user-images.githubusercontent.com/86873404/169595259-e8cc76a8-437c-4260-9d53-aaefd606173b.png', id: 4, }, ]; lo que quiero decir es que necesito que la segunda matriz aparezca en cada objeto de la primera matriz. Intenté hacer esto {pizzaSlicesContent.map(item2 => ( ))} dentro del primer mapa, pero me dio un error
Puedes hacer array.find dentro del map ( codesandbox ) -
{teamSliderContent.map((item) => ( <p key={item.id}> {item.Title} <img width={100} height={100} alt="pizza" src={ pizzaSlicesContent.find((slice) => slice.id === item.id) .sliceRight } /> </p> ))} El único problema es que la matriz pizzaSlicesContent tiene diferentes nombres de propiedad, sliceUp , sliceDown , sliceLeft y sliceRight .
Esto se puede lograr utilizando el operador de propagación en JavaScript.
let newArray = teamSliderContent.map((teamSlider) => { return ({ ...teamSlider, pizzaSlicesContent: pizzaSlicesContent }) }) En el código anterior, usando el operador de propagación en el objeto teamSlider , estamos creando un nuevo objeto JavaScript con todas las propiedades del objeto teamSlider (copia superficial) y pizzaSlicesContent .
Esta función hará el truco:
/** * Zips and merges two object arrays * @param {Array<object>} a * @param {Array<object>} b * @returns */ function mergeZip(a, b){ return a.map((itemA, index) => ({...itemA, ...b[index]})) } Lo que quiere hacer es zip() (así es como se llama la función incorporada para esto en Python) y al mismo tiempo fusionar los dos objetos dentro de ambas matrices.
La forma más fácil de zip() , suponiendo que ambas matrices tengan la misma longitud, es usar map() . La devolución de llamada de map() proporciona tanto el elemento dentro de la matriz que actualmente se repite como un índice. Usando ese índice, puede obtener el valor de la segunda matriz en la misma posición y luego usar la sintaxis extendida para fusionar los objetos.
Aquí la función utilizada para su caso de uso:
const teamSliderContent = [ { Describtion1: "Chef. Mordy Wenk", Title: "Head of the Chief staff.", id: 1, }, { Describtion1: "Chef. Mark Brunnett", Title: "Junior chef.", id: 2, }, { Describtion1: "Chef. Griffin Zach", Title: "a Talented Chef.", id: 3, }, { Describtion1: "Chef. Will Smith", Title: "a Talented Chef.", id: 4, }, ]; const pizzaSlicesContent = [ { sliceUp: "https://user-images.githubusercontent.com/86873404/169595266-b0085f5c-cdd9-4f96-93b0-49edcc08fa72.png", id: 1, }, { sliceLeft: "https://user-images.githubusercontent.com/86873404/169595240-fe7f4c80-c8c3-44f6-9cc8-4fec55587f87.png", id: 2, }, { sliceDown: "https://user-images.githubusercontent.com/86873404/169595250-a5692462-8aec-43f8-91a8-a042d9dd35db.png", id: 3, }, { sliceRight: "https://user-images.githubusercontent.com/86873404/169595259-e8cc76a8-437c-4260-9d53-aaefd606173b.png", id: 4, }, ]; /** * Zips and merges two object arrays * @param {Array<object>} a * @param {Array<object>} b * @returns */ function mergeZip(a, b){ return a.map((itemA, index) => ({...itemA, ...b[index]})) } const result = mergeZip(teamSliderContent, pizzaSlicesContent) console.log(result) .as-console-wrapper { max-height: 100% !important; top: 0; }