I have this array of objects, that I've mapped through it to get its content as

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

and this is how I mapped it:

        {teamSliderContent.map(item => (
          <p>{item}</p>
        ))}

and I want to map this array of object inside the previous array

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

what I mean is I need to get the second array to appear in every object of the first array I tried to do this {pizzaSlicesContent.map(item2 => ( ))} inside the first map , but it gave me an error

CodePudding user response：

let newArray = teamSliderContent.map((e, i) => {
  let tempIndex = pizzaSlicesContent.findIndex(bb => bb.id === e.id)
  return ({
    ...e,
    ...pizzaSlicesContent[tempIndex]
  })
})

CodePudding user response：

You can do array.find inside the 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>
))}

The only problem is that the array pizzaSlicesContent has different property names, sliceUp, sliceDown, sliceLeft & sliceRight.

CodePudding user response：

This function will do the trick:

/**
 * 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]}))
}

What you want to do is zip() (that's how the function built-in for this in Python is called) and at the same time merge the two objects within both arrays.

The easiest way to zip(), assuming both arrays have the same length, is to use map(). The callback of map() provides both the item within the array which is currently looped over as well as an index. Using that index you can get the value of the second array at the same position and then use spread syntax to merge the objects together.

Here the the function used for your usecase:

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; }