Cách hiển thị dữ liệu json trong bảng html bằng javascript?
Định dạng JSON được sử dụng nhiều để lưu trữ dữ liệu theo cách có cấu trúc. Ngay cả dữ liệu nhận được từ máy chủ cũng ở định dạng JSON. Ở đây chúng ta sẽ xem cách hiển thị dữ liệu JSON trong trang HTML bằng JavaScript dưới dạng bảng và danh sách Show
Dữ liệu JSON có cấu trúc như một đối tượng javascript. Dữ liệu được lưu trữ trong các cặp khóa-giá trị, trong đó khóa là một chuỗi và giá trị có thể là bất kỳ loại dữ liệu nào Đầu tiên, bạn có thể nghĩ đến việc hiển thị những dữ liệu này trực tiếp dưới dạng văn bản trên trang web nhưng điều này trông không hấp dẫn và cũng không thể đọc được Vì vậy, trong bài viết này, chúng tôi sẽ tìm nạp dữ liệu JSON từ máy chủ cục bộ hoặc máy chủ từ xa và hiển thị nó theo cách tốt hơn Hiển thị dữ liệu JSON trong trang HTML bằng JavaScriptĐể bắt đầu làm việc, hãy theo dõi dữ liệu JSON của chúng tôi. liên kết nguồn
Bây giờ chúng tôi sẽ lấy dữ liệu JSON này từ máy chủ từ xa và hiển thị nó trên trang web Để đọc dữ liệu JSON từ máy chủ cục bộ hoặc máy chủ từ xa, chúng tôi sẽ sử dụng phương thức 0Phương thức fetch() lấy URL của tệp JSON làm đối số và trả về a . object. Sau khi giải quyết đối tượng Lời hứa , chúng tôi sẽ nhận được dữ liệu JSON trong Phản hồi object.
Chúng tôi có dữ liệu JSON trong dữ liệu được lưu trữ trong một biến. Bây giờ chúng ta có thể sử dụng nó để hiển thị dữ liệu trong trang web. 1. Hiển thị dữ liệu JSON dưới dạng danh sáchĐể hiển thị dữ liệu JSON trong danh sách, chúng tôi sẽ tạo động các phần tử HTML và chèn dữ liệu vào chúng Các yếu tố chúng ta cần tạo ở đây là 1 và 2Trước khi chúng tôi bắt đầu, hãy ghi nhớ cấu trúc dữ liệu của dữ liệu JSON. Hình ảnh dưới đây cho thấy để lấy tên học sinh đầu tiên, chúng ta phải sử dụng 3 và để lấy điểm của học sinh đầu tiên, chúng ta phải sử dụng 4, nơi để truy cập điểm của môn toán, chúng ta phải sử dụng 5Lưu ý cấu trúc trên, trước tiên chúng ta tạo một phần tử 1 và gán nó cho một biến
Phần tử 1 này sẽ là phần tử chính bất kỳ phần tử danh sách nào ( 2) sẽ đại diện cho một học sinh và điểm của họ và sẽ được tạo độngBây giờ chúng ta có thể tạo vòng lặp for sẽ lặp qua mảng 9 và tạo phần tử 2 cho mỗi học sinh và đặt InternalHTML của phần tử 2 thành tên học sinh
Bây giờ hãy tạo một danh sách khác sẽ chứa tất cả các điểm của sinh viên và nối nó vào phần tử 2 (studentLI) được tạo ngay trước đó
Bây giờ chúng tôi đã tạo một danh sách các sinh viên và điểm của họ. Bây giờ chúng ta có thể nối phần tử 1 với phần tử 4
Cuối cùng, nối nó vào cơ thể. Đây là mã hoàn chỉnh để hiển thị danh sách sinh viên và điểm của họ Thí dụ
▶ Dùng thử đầu ra 2. Hiển thị dữ liệu JSON dưới dạng bảngĐể hiển thị dữ liệu JSON trong một bảng, chúng ta sẽ tạo một hàm lấy dữ liệu JSON làm đối số và tạo một bảng và nối nó vào phần thân Trong hàm createtable() tạo cấu trúc cơ bản của bảng để chúng ta có tiêu đề của bảng là 'tên' và . Bên dưới các dấu này tạo một danh sách khác để hiển thị chủ đề như trong mã bên dưới.
Bài Viết Liên QuanQuảng CáoCó thể bạn quan tâmCách sửa lỗi trong speakers properties ko hiện enhancement năm 20241 tháng trước . bởi MilitaryTracingToplist được quan tâm#1
Top 7 sự tích hồ gươm - ngữ văn lớp 6 20235 tháng trước#2
Top 7 gdcd 6 bài 1 kết nối tri thức 20235 tháng trước#3
Top 7 ý nghĩa của xây dựng gia đình văn hóa 20235 tháng trước#4
Top 6 mẫu hợp đồng mượn đất làm nhà xưởng 20235 tháng trước#5
Top 3 tổng tài biến thái tôi yêu anh tập 27 20235 tháng trước#6
Top 6 kết thực phim mỹ nhân vô lệ 20235 tháng trước#7
#8
Top 8 đề tài và chủ de của tác phẩm tắt đèn 20235 tháng trước#9
Top 5 tiểu sử của thầy thích pháp hòa 20235 tháng trướcQuảng cáoXem NhiềuBánh rau câu sinh nhật chứa bao nhiêu calo năm 20241 tuần trướcTự học tiếng anh như thế nào hiệu quả năm 20241 tuần trướcBài tập tìm hằng số cân bằng hoá 11 năm 20245 ngày trướcHọ tiếng nhật của bạn là gì năm 20241 tuần trướcBăn khoăn có nghĩa là gì năm 20246 ngày trướcGoh là viết tắt của gì trong tiếng anh năm 20242 giờ trướcTìm hiểu chung về văn bản nghị luận năm 20243 ngày trướcAnh bộ đội cụ hồ gốc bỉ là gì năm 20243 ngày trướcÝ nghĩa của header from top là gì năm 20241 tuần trướcQuảng cáoChúng tôiTrợ giúpBản quyền © 2021 Học Tốt Inc.
|