將一個數組與嵌套數組進行比較，並將值推送到 Javascript 中具有相同索引的新數組中

Question

我有 2 個數組

const arrayOne = [
 {
  id: '110'
 },
 {
  id: '202'
 },
 {
  id: '259'
 }
];

const arrayTwo = [
 {
  data: [
   {
     value: 'Alpha',
     id: '001'
    }
   ],
 {
  data: [
    {
     value: 'Bravo',
     id: '202'
    }
  ]
 }
];

我需要創建一個新數組，將arrayOne[idx].id與arrayTwo[idx].data[idx2].id進行比較

匹配后，我需要針對arrayOne中的每個索引創建一個數組推送值（ arrayTwo[idx].data[idx2].value ）到新數組。

在這個例子中，我會得到newArr = [null, 'Bravo', null]

我試過的：

arrayOne.map(item => ({
   ...item,
   result: arrayTwo.filter(itemTwo => item.data.map(x => x.id).includes(itemTwo.id))
}));

並且

const newArr = [];
arrayOne.map((item, idx) => {
   if (arrayTwo.filter(itemTwo => itemTwo.data?.map(x => x.id) === item.id)) {
     newArr.push(arrayTwo.data[idx].value);
   } else newArr.push(null);
 });

Answer 1

• 使用map遍歷arr1的每個元素並返回一個新數組。
• 使用map和flat重新組裝arr2數組中每個元素的數據屬性數組
• 當arr1遍歷時，可以得到當前元素id ，使用filter過濾合並后的數據數組，返回一個與當前元素id匹配的元素數組。
• 根據 id 不匹配的情況，使用可選鏈操作符獲取值。
• 返回時
  1. 如果要獲取 id 和 value 屬性的元素數組，使用條件（三元）運算符，不匹配時返回原始元素，匹配時使用擴展語法，復制當前元素屬性，並添加價值屬性
  2. 如果只想獲取匹配結果的數組，只需要返回值，記得使用可選的鏈運算符將不匹配的值轉換為null 。

 const arr1 = [ { id: '110' }, { id: '202' }, { id: '259' } ]; const arr2 = [ { data: [{ value: 'Alpha', id: '001' }] }, { data: [{ value: 'Bravo', id: '202' }] } ]; const result1 = arr1.map(o1 => { const data = arr2.map(o2 => o2.data).flat(); const value = data.filter(o2 => o2.id === o1.id)[0]?.value; return value ? {...o1, value} : o1; }); const result2 = arr1.map(o1 => { const data = arr2.map(o2 => o2.data).flat(); const value = data.filter(o2 => o2.id === o1.id)[0]?.value; return value ?? null; }); [result1, result2].forEach(r => console.log(JSON.stringify(r)));

Answer 2

起初這似乎很困難，因為arrayTwo的結構。 我們可以通過將它轉換成字典來使我們的生活更輕松，然后我們可以映射arrayOne來獲得我們的結果。

 const arrayOne = [ {id: '110'}, {id: '202'}, {id: '259'} ]; const arrayTwo = [ {data: [{value: 'Alpha',id: '001'}]}, {data: [{value: 'Bravo',id: '202'}]} ]; const dict = {}; arrayTwo.forEach((obj) => { let key = obj.data[0].id let value = obj.data[0].value dict[key] = value } ) const result = arrayOne.map(obj => (dict[obj.id] || null)) console.log('Output: ', result) console.log('Dictionary:', dict)

這也可以通過Array.prototype.reduce()來完成：

 const arrayOne = [ {id: '110'}, {id: '202'}, {id: '259'} ]; const arrayTwo = [ {data: [{value: 'Alpha',id: '001'}]}, {data: [{value: 'Bravo',id: '202'}]} ]; const dict = arrayTwo.reduce((output, obj) => { let key = obj.data[0].id let value = obj.data[0].value output[key] = value return output }, {}) // dict = {'001':'Alpha', '202': 'Bravo'} const result = arrayOne.map(obj => (dict[obj.id] || null)) console.log(result)

Answer 3

你可以試試這行簡單的代碼：

 const arrayOne = [{ id: '110' }, { id: '202' }, { id: '259' }]; const arrayTwo = [{ data: [{ value: 'Alpha', id: '001' }], }, { data: [{ value: 'Bravo', id: '202' }] }]; let result = arrayOne.map(el => { let found = arrayTwo.find(f => f.data.at(0)?.id == el.id)?.data.at(0)?.value; return { id: el.id, value: found ?? null}; }); console.log(result);