home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

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

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

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

อ็อบเจ็กต์ลิเทอ럴 JavaScript:

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

ข้างต้นคืออาร์เรย์อ็อบเจ็กต์ลิเทอ럴 JavaScript ที่มี 4 อ็อบเจ็กต์ (ออกกำลังกาย) เราต้องการนำอ็อบเจ็กต์เหล่านั้นมาแสดงเป็นรายการในเบราว์เซอร์ เช่นนี้:

  • Deadlift
  • Pull-up
  • Push-up
  • Squat

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

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

การแสดงอาร์เรย์อ็อบเจ็กต์ลิเทอ럴 JavaScript เป็นอิลีเมนต์ HTML


เราต้องทำ 4 ขั้นตอนต่อไปนี้:

  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. วนลูปผ่านอ็อบเจ็กต์ออกกำลังกาย

เนื่องจากเราจัดการกับอ็อบเจ็กต์ออกกำลังกายแต่ละตัวภายในอาร์เรย์ เราจึงต้องวนลูป (iterate) ผ่านแต่ละออกกำลังกายก่อนจึงจะทำอะไรกับมันได้

เพิ่มโค้ดต่อไปนี้ด้านล่างอ็อบเจ็กต์ 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); }

ตอนนี้ตรวจสอบคอนโซลเบราว์เซอร์ คุณควรเห็นนี้:

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

ตอนนี้เราเข้าถึงอ็อบเจ็กต์ออกกำลังกายแต่ละตัวได้แล้ว

3. ห่อแต่ละออกกำลังกายในอิลีเมนต์รายการ HTML

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

ก่อนอื่น เพิ่มตัวแปรต่อไปนี้ก่อนเริ่มลูป for:

let exerciseItems = "";

ตอนนี้ภายในลูป เพิ่มนี้:

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

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

4. เพิ่มรายการออกกำลังกายเข้าไปในรายการออกกำลังกาย

สุดท้าย เพื่อแสดงรายการออกกำลังกายภายในอิลีเมนต์รายการออกกำลังกาย ให้เพิ่มโค้ดนี้ด้านล่างลูป for:

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 += "&lt;li&gt;" + exercise.name + "&lt;/li&gt;"; } exerciseList.innerHTML = exerciseItems; })();

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