แสดงเนื้อหาของ JavaScript Object ในรูปแบบสตริงด้วย JSON.stringify()

แปลงออบเจกต์เป็นสตริง JSON และแสดงบนหน้าเว็บ

ใช้ JSON.stringify() แปลงออบเจกต์เป็นสตริง แล้วแสดงด้วย innerHTML

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display Object</title>
</head>
<body>
  <p id="objectId"></p>

  <script>
    // สร้างออบเจกต์ตัวอย่าง
    var add = {};
    var value = "name".split(" ");
    value.forEach(function(v) {
      add[v] ? add[v]++ : add[v] = "John";
    });

    // แปลงเป็นสตริง JSON แล้วแสดง
    document.getElementById("objectId").innerHTML = JSON.stringify(add);
  </script>
</body>
</html>

วิธีรัน

บันทึกเป็น index.html แล้วเปิดด้วย Live Server

คำอธิบาย

• JSON.stringify(object) แปลงออบเจกต์/อาร์เรย์เป็นสตริง JSON
• พารามิเตอร์ที่ 2 (replacer) และ 3 (space) ใช้จัดรูปแบบได้ เช่น JSON.stringify(obj, null, 2) เพื่อ indent
• innerHTML ใส่ HTML เนื้อหาลงใน element

ตัวอย่างเพิ่มเติม: Pretty Print

const obj = { name: "John", age: 30, city: "New York" };
console.log(JSON.stringify(obj, null, 2));
// ผลลัพธ์:
// {
//   "name": "John",
//   "age": 30,
//   "city": "New York"
// }