Cách hiển thị các đối tượng JavaScript dưới dạng phần tử HTML

Trong hướng dẫn này, bạn sẽ học cách hiển thị danh sách các đối tượng JavaScript dưới dạng danh sách các phần tử HTML trên trang web.

Giả sử bạn có một danh sách các đối tượng JavaScript và bạn cần xuất chúng dưới dạng các phần tử HTML trong trình duyệt web. Trong ví dụ này, chúng tôi có một danh sách các bài tập, được đại diện bởi một đối tượng JavaScript theo nghĩa đen.

Đối tượng JavaScript theo nghĩa đen:

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

Trên đây là một mảng ký tự đối tượng JavaScript với bốn đối tượng (bài tập). Chúng tôi muốn lấy những đối tượng đó và hiển thị chúng dưới dạng danh sách trong trình duyệt, như sau:

Deadlift
Kéo lên
Đẩy lên
Ngồi xổm

Đó là một danh sách không có thứ tự. Nếu bạn kiểm tra danh sách ở trên trong Chrome DevTools, đánh dấu HTML cho danh sách trên sẽ giống như sau:

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

Hiển thị mảng ký tự đối tượng JavaScript dưới dạng các phần tử HTML

Chúng ta cần thực hiện bốn bước sau:

Tạo một phần tử danh sách không có thứ tự trống bằng HTML, để chúng tôi có thể thêm các mục danh sách bài tập của mình vào bên trong nó.
Tìm và nắm giữ tất cả các bài tập từ mảng ký tự đối tượng JavaScript, bằng cách sử dụng for vòng lặp.
Gói từng đối tượng bài tập riêng lẻ bên trong mục danh sách (<li></li> ).
Xuất các phần tử HTML của mục danh sách trong trình duyệt bên trong phần tử danh sách không có thứ tự (<ul></ul> ) mà chúng tôi đã tạo ở bước 1.

1. Tạo một phần tử danh sách không có thứ tự trống

Để thiết lập phần tử danh sách trống không có thứ tự trong HTML, hãy thêm phần sau vào bên trong index.html của bạn (hoặc cửa sổ HTML của bạn nếu bạn sử dụng thứ gì đó như CodePen):

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

Bây giờ, chúng ta hãy gán một tham chiếu đến danh sách không có thứ tự đó cho một biến để chúng ta có thể thêm nó vào danh sách không có thứ tự của mình sau này. Thêm mã sau vào đầu tệp tập lệnh của bạn:

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

2. Lặp qua các đối tượng bài tập

Vì chúng ta đang xử lý các đối tượng bài tập riêng lẻ bên trong một mảng, chúng ta cần lặp lại (lặp lại) qua từng bài tập trước khi có thể làm gì đó với chúng.

Thêm mã sau ngay bên dưới đối tượng JS của bạn:

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

Toàn bộ tệp tập lệnh của bạn bây giờ sẽ trông giống như sau:

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);
}

Bây giờ hãy kiểm tra bảng điều khiển trình duyệt của bạn và bạn sẽ thấy điều này:

Cách hiển thị các đối tượng JavaScript dưới dạng phần tử HTML

Bây giờ chúng ta có quyền truy cập vào từng đối tượng bài tập riêng lẻ.

3. Gói mỗi bài tập bên trong một phần tử mục danh sách HTML

Bây giờ chúng ta hãy gói các mục bài tập đã thu thập của chúng tôi bên trong thẻ mục danh sách:

Đầu tiên, hãy thêm biến sau ngay trước khi vòng lặp for của bạn bắt đầu:

let exerciseItems = "";

Bây giờ bên trong vòng lặp của bạn, hãy thêm cái này:

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

Bây giờ nếu bạn console.log(exerciseItems) (bên ngoài và bên dưới vòng lặp của bạn) bảng điều khiển của bạn sẽ xuất ra từng mục bài tập được bao bọc bên trong các phần tử mục danh sách.

4. Thêm các mục bài tập bên trong danh sách bài tập

Cuối cùng, để hiển thị các mục bài tập của chúng tôi bên trong phần tử danh sách bài tập của chúng tôi, hãy thêm mã này ngay bên dưới vòng lặp for của bạn:

exerciseList.innerHTML = exerciseItems;

Nếu bạn đã làm đúng mọi thứ, danh sách bài tập không có thứ tự của bạn bây giờ sẽ hiển thị tất cả các mục bài tập bên trong cửa sổ trình duyệt của bạn.

Đây là tất cả mã chúng tôi đã viết để tham khảo:

(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;
})();

Đây là CodePen có tất cả mã hoạt động.