วิธีแสดงออบเจกต์ JavaScript เป็นองค์ประกอบ HTML

ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีแสดงรายการออบเจ็กต์ JavaScript เป็นรายการองค์ประกอบ HTML บนหน้าเว็บ

สมมติว่าคุณมีรายการออบเจ็กต์ JavaScript และคุณต้องส่งออกเป็นองค์ประกอบ HTML ในเว็บเบราว์เซอร์ ในตัวอย่างนี้ เรามีรายการแบบฝึกหัด แทนด้วยตัวอักษรอ็อบเจกต์ JavaScript

ตัวอักษรอ็อบเจ็กต์ JavaScript:

let exerciseList = [
  {
    name: "Deadlift",
  },
  {
    name: "Push-up",
  },
  {
    name: "Pull-up",
  },
  {
    name: "Squat",
  },
];

ด้านบนเป็นอาร์เรย์ตัวอักษรออบเจ็กต์ JavaScript ที่มีสี่อ็อบเจ็กต์ (แบบฝึกหัด) เราต้องการนำวัตถุเหล่านั้นมาแสดงเป็นรายการในเบราว์เซอร์ ดังนี้:

• เดดลิฟท์
• ดึงขึ้น
• วิดพื้น
• หมอบ

นั่นเป็นรายการที่ไม่เรียงลำดับ หากคุณตรวจสอบรายการด้านบนใน Chrome DevTools มาร์กอัป HTML สำหรับรายการด้านบนจะมีลักษณะดังนี้:

<ul>
  <li>Deadlift</li>
  <li>Pull-up</li>
  <li>Push-up</li>
  <li>Squat</li>
</ul>

แสดงอาร์เรย์ตัวอักษรของวัตถุ JavaScript เป็นองค์ประกอบ HTML

เราต้องดูแลสี่ขั้นตอนต่อไปนี้:

1. สร้างรายการที่ไม่เรียงลำดับที่ว่างเปล่าด้วย HTML เพื่อให้เราสามารถเพิ่มรายการแบบฝึกหัดของเราเข้าไปข้างในได้
2. ค้นหาและคว้าแบบฝึกหัดทั้งหมดจากอาร์เรย์ตามตัวอักษรของออบเจกต์ JavaScript โดยใช้ for วนซ้ำ
3. ห่อแต่ละออบเจ็กต์การออกกำลังกายไว้ในรายการ (<li></li> ) แท็ก
4. ส่งออกองค์ประกอบ HTML ของรายการในเบราว์เซอร์ภายในองค์ประกอบรายการที่ไม่เรียงลำดับ (<ul></ul> ) ที่เราสร้างขึ้นในขั้นตอนที่ 1

1. สร้างรายการที่ไม่เรียงลำดับที่ว่างเปล่า

ในการตั้งค่าองค์ประกอบรายการที่ไม่เรียงลำดับที่ว่างเปล่าใน HTML ให้เพิ่มสิ่งต่อไปนี้ใน index.html ของคุณ (หรือหน้าต่าง HTML ของคุณ หากคุณใช้บางอย่างเช่น CodePen):

<ul class="exercise-list"></ul>

ตอนนี้ เรามากำหนดการอ้างอิงไปยังรายการที่ไม่เรียงลำดับนั้นให้กับตัวแปร เพื่อให้เราสามารถเพิ่มไปยังรายการที่ไม่เรียงลำดับของเราได้ในภายหลัง เพิ่มรหัสต่อไปนี้ที่ด้านบนของไฟล์สคริปต์ของคุณ:

let exerciseList = document.querySelector(".exercise-list");

2. วนรอบวัตถุออกกำลังกาย

เนื่องจากเรากำลังจัดการกับออบเจกต์การออกกำลังกายแต่ละอย่างภายในอาเรย์ เราจึงต้องวนซ้ำ (วนซ้ำ) ผ่านแบบฝึกหัดแต่ละครั้งก่อนจึงจะทำอะไรกับพวกมันได้

เพิ่มรหัสต่อไปนี้ด้านล่างวัตถุ JS ของคุณ:

for (let exercise of exerciseList) {
  console.log(exercise.name);
}

ไฟล์สคริปต์ทั้งหมดของคุณควรมีลักษณะดังนี้:

let exerciseList = document.querySelector(".exercise-list");

let exerciseObjects = [
  {
    name: "Deadlift",
  },
  {
    name: "Push-up",
  },
  {
    name: "Pull-up",
  },
  {
    name: "Squat",
  },
];

for (exercise of exerciseObjects) {
  console.log(exercise.name);
}

ตรวจสอบคอนโซลเบราว์เซอร์ของคุณแล้วคุณจะเห็นสิ่งนี้:

ตอนนี้เราสามารถเข้าถึงวัตถุการออกกำลังกายแต่ละรายการได้แล้ว

3. ห่อแต่ละแบบฝึกหัดภายในองค์ประกอบรายการ HTML

ตอนนี้เรามาห่อรายการออกกำลังกายที่รวบรวมไว้ภายในแท็กรายการ:

ขั้นแรก เพิ่มตัวแปรต่อไปนี้ก่อนที่ for loop ของคุณจะเริ่มต้น:

let exerciseItems = "";

ตอนนี้ในลูปของคุณ ให้เพิ่มสิ่งนี้:

exerciseItems += "<li>" + exercise.name + "</li>";

ตอนนี้ถ้าคุณ console.log(exerciseItems) (ด้านนอกและด้านล่างลูปของคุณ) คอนโซลของคุณจะส่งออกรายการการออกกำลังกายแต่ละรายการที่อยู่ภายในองค์ประกอบของรายการ

4. เพิ่มรายการแบบฝึกหัดในรายการแบบฝึกหัด

สุดท้าย หากต้องการแสดงรายการการออกกำลังกายภายในองค์ประกอบรายการแบบฝึกหัด ให้เพิ่มโค้ดนี้ด้านล่าง for loop ของคุณ:

exerciseList.innerHTML = exerciseItems;

หากคุณทำทุกอย่างถูกต้อง รายการแบบฝึกหัดที่ไม่เรียงลำดับของคุณควรแสดงรายการแบบฝึกหัดทั้งหมดภายในหน้าต่างเบราว์เซอร์ของคุณ

นี่คือรหัสทั้งหมดที่เราเขียนเพื่อใช้อ้างอิง:

(function() {
  let exerciseList = document.querySelector(".exercise-list");

  let exerciseObjects = [
    {
      name: "Deadlift",
    },
    {
      name: "Push-up",
    },
    {
      name: "Pull-up",
    },
    {
      name: "Squat",
    },
  ];

  let exerciseItems = "";

  for (exercise of exerciseObjects) {
    exerciseItems += "<li>" + exercise.name + "</li>";
  }

  exerciseList.innerHTML = exerciseItems;
})();

นี่คือ CodePen ที่มีรหัสการทำงานทั้งหมด