Trong hướng dẫn này, bạn sẽ học cách hiển thị danh sách đối tượng JavaScript dưới dạng danh sách phần tử HTML trên trang web.
Giả sử bạn có danh sách các đối tượng JavaScript và cần xuất chúng ra phần tử HTML trên trình duyệt. Trong ví dụ này, chúng ta có danh sách bài tập, được biểu diễn bằng đối tượng literal JavaScript.
Đối tượng literal JavaScript:
let exerciseList = [ { name: "Deadlift", }, { name: "Push-up", }, { name: "Pull-up", }, { name: "Squat", }, ];Trên là mảng đối tượng literal JavaScript với 4 đối tượng (bài tập). Chúng ta muốn lấy các đối tượng đó và hiển thị dưới dạng danh sách trong trình duyệt, như sau:
- Deadlift
- Pull-up
- Push-up
- Squat
Đó là danh sách không thứ tự. Nếu bạn kiểm tra danh sách trên trong Chrome DevTools, mã HTML cho danh sách sẽ trông như sau:
<ul> <li>Deadlift</li> <li>Pull-up</li> <li>Push-up</li> <li>Squat</li> </ul>Hiển thị mảng đối tượng literal JavaScript dưới dạng phần tử HTML
Chúng ta cần thực hiện 4 bước sau:
- Tạo phần tử danh sách không thứ tự rỗng bằng HTML, để thêm các mục bài tập vào bên trong.
- Tìm và nắm giữ tất cả bài tập từ mảng đối tượng literal JavaScript, bằng vòng lặp
for. - Bọc từng đối tượng bài tập riêng lẻ bên trong thẻ mục danh sách (
<li></li>). - Xuất các phần tử HTML mục danh sách ra trình duyệt bên trong phần tử danh sách không thứ tự (
<ul></ul>) tạo ở bước 1.
1. Tạo phần tử danh sách không thứ tự rỗng
Để thiết lập phần tử danh sách không thứ tự rỗng trong HTML, thêm mã sau vào index.html (hoặc cửa sổ HTML nếu dùng CodePen):
<ul class="exercise-list"></ul>Giờ gán tham chiếu đến danh sách không thứ tự đó cho một biến, để sau này thêm vào danh sách. Thêm mã sau ở đầu file script:
let exerciseList = document.querySelector(".exercise-list");2. Lặp qua các đối tượng bài tập
Vì chúng ta xử lý các đối tượng bài tập riêng lẻ bên trong mảng, cần lặp (duyệt) qua từng bài tập trước khi làm gì đó với chúng.
Thêm mã sau ngay bên dưới đối tượng JS:
for (let exercise of exerciseList) { console.log(exercise.name); }Toàn bộ file script giờ trô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); }Kiểm tra console trình duyệt, bạn sẽ thấy:
Giờ chúng ta đã truy cập được từng đối tượng bài tập riêng lẻ.
3. Bọc từng bài tập bên trong phần tử HTML mục danh sách
Giờ hãy bọc các mục bài tập thu thập được bên trong thẻ mục danh sách:
Trước, thêm biến sau ngay trước khi vòng lặp bắt đầu:
let exerciseItems = "";Bên trong vòng lặp, thêm:
exerciseItems += "<li>" + exercise.name + "</li>";Nếu bạn console.log(exerciseItems) (bên ngoài và dưới vòng lặp), console sẽ xuất ra từng mục bài tập được bọc trong phần tử mục danh sách.
4. Thêm các mục bài tập vào danh sách bài tập
Cuối cùng, để hiển thị các mục bài tập bên trong phần tử danh sách bài tập, thêm mã sau ngay dưới vòng lặp:
exerciseList.innerHTML = exerciseItems;Nếu làm đúng hết, danh sách không thứ tự bài tập sẽ hiển thị tất cả các mục bài tập trong cửa sổ trình duyệt.
Đây là toàn bộ mã chúng ta 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 += "<li>" + exercise.name + "</li>"; } exerciseList.innerHTML = exerciseItems; })();Đây là CodePen với mã hoạt động đầy đủ.