การ Loop ผ่าน Array of Arrays ที่มี Objects ใน JavaScript

เมื่อมีข้อมูลเป็น Array ของ Arrays ที่แต่ละอันมี Objects (Nested Arrays of Objects) ต้องใช้ Nested Loops เพื่อเข้าถึงข้อมูลทุกระดับ

ตัวอย่างโค้ด

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Loop Nested Arrays</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>Loop ผ่าน Array of Arrays ที่มี Objects</h1>
  <div class="result"></div>
  <button class="Btn">คลิกที่นี่</button>
  <h3>คลิกปุ่มด้านบนเพื่อ Loop through arrObj</h3>
  <script>
    const BtnEle = document.querySelector(".Btn");
    const resEle = document.querySelector(".result");
    
    const arrObj = [
      [
        { name: "Rohan", age: 22 },
        { name: "Mohan", age: 12 },
        { name: "Shawn", age: 14 }
      ],
      [
        { id: 12, price: 44 },
        { id: 23, price: 45 },
        { id: 91, price: 14 }
      ]
    ];
    
    BtnEle.addEventListener("click", () => {
      arrObj.forEach((subArray, arrIndex) => {
        resEle.innerHTML += `Array ${arrIndex}:<br>`;
        subArray.forEach((obj, objIndex) => {
          resEle.innerHTML += `  Object ${objIndex}: `;
          for (let key in obj) {
            resEle.innerHTML += `${key}=${obj[key]} `;
          }
          resEle.innerHTML += "<br>";
        });
      });
    });
  </script>
</body>
</html>

วิธี Loop แบบต่างๆ

const data = [
  [{a:1}, {a:2}],
  [{b:3}, {b:4}]
];

// 1. Nested forEach (โค้ดตัวอย่าง)
data.forEach((arr, i) => arr.forEach((obj, j) => { ... }));

// 2. Nested for...of (Modern, Readable)
for (const arr of data) {
  for (const obj of arr) {
    for (const [key, value] of Object.entries(obj)) {
      console.log(key, value);
    }
  }
}

// 3. Flat + forEach (Flatten 1 Level)
data.flat().forEach(obj => { ... });

// 4. Reduce (Flatten และ Process พร้อมกัน)
data.reduce((acc, arr) => acc.concat(arr), []).forEach(obj => { ... });

// 5. FlatMap (Map แล้ว Flatten)
data.flatMap(arr => arr.map(obj => process(obj)));

Performance Note

• for...of และ for loop เร็วกว่า forEach เล็กน้อย
• flat() สร้าง Array ใหม่ ใช้ Memory เพิ่ม
• ข้อมูลใหญ่ๆ ควรใช้ Generator หรือ Iterator

ผลลัพธ์

Array 0: Object 0: name=Rohan age=22, Object 1: name=Mohan age=12, Object 2: name=Shawn age=14, Array 1: Object 0: id=12 price=44, Object 1: id=23 price=45, Object 2: id=91 price=14