วิธี reduce อาร์เรย์พร้อม merge หนึ่งในฟิลด์ใน JavaScript

พิจารณาอาร์เรย์อ็อบเจกต์ดังนี้

const arr = [
  { id: 121, hobby: 'cycling' },
  { id: 125, hobby: 'jogging' },
  { id: 129, hobby: 'reading' },
  { id: 121, hobby: 'writing' },
  { id: 121, hobby: 'playing football' },
  { id: 125, hobby: 'cooking' },
  { id: 129, hobby: 'horse riding' }
];

เราต้องเขียนฟังก์ชันรับอาร์เรย์แบบนี้ รวมตาม id ที่ซ้ำกัน และสำหรับ hobby ให้เป็นอาร์เรย์รวม hobby ทั้งหมดของ id นั้น

เราจะใช้ Array.prototype.reduce() วนลูปอาร์เรย์และ merge รายการที่มี index เหมือนกันพร้อมกัน

ตัวอย่าง

const arr = [
  { id: 121, hobby: 'cycling' },
  { id: 125, hobby: 'jogging' },
  { id: 129, hobby: 'reading' },
  { id: 121, hobby: 'writing' },
  { id: 121, hobby: 'playing football' },
  { id: 125, hobby: 'cooking' },
  { id: 129, hobby: 'horse riding' }
];
const mergeArray = (arr) => {
  return arr.reduce((acc, val) => {
    const ind = acc.findIndex(item => item.id === val.id);
    if(ind !== -1){
      acc[ind].hobby.push(val.hobby);
    }else{
      acc.push({
        id: val.id,
        hobby: [val.hobby]
      });
    };
    return acc;
  }, []);
};
console.log(mergeArray(arr));

ผลลัพธ์

ผลลัพธ์ในคอนโซลจะเป็น

[
  { id: 121, hobby: [ 'cycling', 'writing', 'playing football' ] },
  { id: 125, hobby: [ 'jogging', 'cooking' ] },
  { id: 129, hobby: [ 'reading', 'horse riding' ] }
]