map object 數組在 object 數組內

Question

我有這個對象數組，我已經通過它映射以獲取其內容

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

這就是我映射它的方式：

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

我想 map 前一個數組中的這個對象數組

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

我的意思是我需要讓第二個數組出現在第一個數組的每個{pizzaSlicesContent.map(item2 => ( ))}中

Answer 1

您可以在map ( codesandbox ) 中執行array.find -

{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>
))}

唯一的問題是數組pizzaSlicesContent具有不同的屬性名稱sliceUp 、 sliceDown 、 sliceLeft和sliceRight 。

Answer 2

這可以使用 JavaScript 中的擴展運算符來實現。

let newArray = teamSliderContent.map((teamSlider) => {
  return ({
    ...teamSlider,
    pizzaSlicesContent: pizzaSlicesContent
  })
})

在上面的代碼中，在teamSlider object 上使用展開運算符，我們創建了一個新的 JavaScript object，其中包含teamSlider object（淺拷貝）的所有屬性，並將pizzaSlicesContent添加到其中。

Answer 3

這個 function 可以解決問題：

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

你想要做的是zip() （這就是 Python 中為此內置的 function 的調用方式），同時合並兩個 arrays 中的兩個對象。

假設 arrays 具有相同的長度，最簡單的zip()方法是使用map() 。 map()的回調提供數組中當前循環的項目以及索引。 使用該索引，您可以在相同的 position 處獲取第二個數組的值，然后使用擴展語法將對象合並在一起。

這是用於您的用例的 function：

 const teamSliderContent = [ { Describtion1: "Chef. Mordy Wenk", Title: "Head of the Chief staff.", id: 1, }, { Describtion1: "Chef. Mark Bru.nett", 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; }