วิธี Import Object ที่มี Sub-objects และ Arrays ใน JavaScript

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

ตัวอย่างต่อไปนี้แสดงการ import object ที่มี sub-objects และ arrays:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Document</title> 
  <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result{ font-size: 18px; font-weight: 500; }
  </style> 
</head> 
<body> 
  <h1>Importing an Object with Sub Objects and Arrays</h1> 
  <div class="result" style="color: green;"></div> 
  <script> 
    let sampleEle = document.querySelector(".sample"); 
    let obj = JSON.parse(sampleEle.innerHTML); 
  </script> 
  <script src="script.js" type="module"> </script> 
</body> 
</html>

script.js

import obj from "./sample.js"; 
let resultEle = document.querySelector(".result"); 
for (let i in obj) { 
  resultEle.innerHTML += "Property = " + i + " : Value = " + obj[i] + ""; 
}

sample.js

export default{ 
  firstName: "Rohan", 
  lastName: "Sharma", 
  school: { 
    name: "St Marks", 
    address: "USA", 
  }, 
  sports: ["cricket", "football"], 
};

ผลลัพธ์

คำอธิบาย

ใช้ export default สำหรับ object ที่ซับซ้อนมี nested objects และ arrays จากนั้น import ด้วยชื่อเดียวได้เลย ไม่ต้องใช้ {} เพราะเป็น default export