Nhóm mảng đối tượng theo ID trong JavaScript

Dùng Array.reduce() để gom nhóm các đối tượng theo một khóa (key) cụ thể, ví dụ age. Kết quả là đối tượng với key là giá trị nhóm, value là mảng các item thuộc nhóm đó.

Ví dụ

Nhóm mảng people theo age:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Nhóm mảng đối tượng theo ID</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 18px; font-weight: 500; color: rebeccapurple; }
  </style>
</head>
<body>
  <h1>Nhóm mảng đối tượng theo ID (age) trong JavaScript</h1>
  <div class="result">
    { name: 'Rohan', age: 18 }, { name: 'Mohan', age: 20 }, { name: 'Shawn', age: 18 }, { name: 'Michael', age: 18 }, { name: 'David', age: 20 }
  </div>
  <button class="Btn">NHÓM THEO TUỔI</button>
  <h3>Nhấn nút để nhóm và xem kết quả trong Console (F12)</h3>
  <script>
    const resEle = document.querySelector(".result");
    const btn = document.querySelector(".Btn");
    const people = [
      { name: "Rohan", age: 18 },
      { name: "Mohan", age: 20 },
      { name: "Shawn", age: 18 },
      { name: "Michael", age: 18 },
      { name: "David", age: 20 },
    ];
    const groupBy = (array, key) => array.reduce((result, obj) => {
      (result[obj[key]] = result[obj[key]] || []).push(obj);
      return result;
    }, {});
    const grouped = groupBy(people, "age");
    btn.addEventListener("click", () => {
      console.log(grouped);
      resEle.innerHTML += `<br>Đã log ra Console. Xem F12 > Console<br>`;
      resEle.innerHTML += `18: ${JSON.stringify(grouped[18])}<br>`;
      resEle.innerHTML += `20: ${JSON.stringify(grouped[20])}`;
    });
  </script>
</body>
</html>

Kết quả

Console hiển thị: {18: [{name:'Rohan'...}, {name:'Shawn'...}, {name:'Michael'...}], 20: [{name:'Mohan'...}, {name:'David'...}]}.

Mở rộng: Có thể dùng Map thay object thường để giữ thứ tự key.