Làm cách nào để hiển thị dữ liệu tệp JSON trong HTML?

Bây giờ trong tệp javascript, chúng tôi sẽ sử dụng phương thức tìm nạp để tìm nạp các sản phẩm từ tệp JSON. Khi chúng tôi có các sản phẩm, chúng tôi sẽ hiển thị từng sản phẩm trong mẫu hàng của bảng

fetch("products.json")
.then(function(response){
	return response.json();
})
.then(function(products){
	let placeholder = document.querySelector("#data-output");
	let out = "";
	for(let product of products){
		out += `
			
				  
				${product.name}
				${product.price}
				${product.inventory}
				${product.productCode}
			
		`;
	}

	placeholder.innerHTML = out;
});

phân tích mã

Hãy phân tích từng dòng mã javascript

• Trong dòng 1, chúng tôi sử dụng phương thức tìm nạp () để lấy dữ liệu từ các sản phẩm. tập tin json.

  fetch("products.json")

  
  
• Phương thức fetch() trả về một đối tượng Promise. Vì vậy, trong dòng 2, chúng tôi sử dụng. then() để bắt đối tượng Phản hồi và phân giải nó thành đối tượng javascript bằng. phương thức json(), ở dòng 3.

  .then(function(response){
  	return response.json();
  })
  		

  
  
• Các. json() cũng trả về một lời hứa, vì vậy chúng ta phải sử dụng một phương thức khác. then() để thu thập dữ liệu của chúng tôi (trong trường hợp của chúng tôi là các sản phẩm). Đó là những gì chúng tôi làm trong dòng 5.
  Đối số sản phẩm bên trong hàm đang chứa một mảng sản phẩm javascript.

  .then(function(products){

  
  
• Trong dòng 6, chúng tôi đang nhắm mục tiêu phần thân bảng trong tệp html và chúng tôi lưu trữ nó trong biến trình giữ chỗ.

  	let placeholder = document.querySelector("#data-output");

  
  
• Trong dòng 7, chúng tôi khởi tạo một biến có tên out và chúng tôi đang đặt giá trị của nó thành một chuỗi rỗng, vì vậy chúng tôi có thể sử dụng biến out sau này trong tập lệnh.

  	let out = "";

  
  
• Tiếp theo, chúng ta sẽ lặp qua mảng sản phẩm ở dòng 8 để có thể truy cập mọi sản phẩm.

  	for(let product of products){

  
  
• Bên trong vòng lặp for, chúng tôi sử dụng biến out để nối thêm một mẫu hàng của bảng chứa các giá trị sản phẩm. Chúng tôi đang sử dụng một mẫu chữ (dấu tick phía sau ``) để viết mã html.

  	out += `
  			
  				  
  				${product.name}
  				${product.price}
  				${product.inventory}
  				${product.productCode}
  			
  		`;
  	}
  		

• Chúng ta có thể chèn mã html, biến javascript bằng cấu trúc này ${product. hình ảnh}
• Và điều cuối cùng chúng ta phải làm là nhắm mục tiêu phần tử tbody và thêm dữ liệu mà biến out nắm giữ.

  
  	
  		
  			
  				Image
  				Product name
  				Price
  				inventory
  				Product code
  			
  		
  		
  			
  		
  	
  
  	 
  

  0

Kết quả

Chạy đoạn mã trên trên trình duyệt bạn sẽ nhận được kết quả như sau. Bạn cũng phải tải xuống css để có cùng kiểu chính xác. Nhấp vào nút "Nhận mã nguồn"

Đị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

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

{
  "result": [
    {
      "name": "John",
      "marks":{
        "math":"78",
        "english":"90",
        ...
      }
    },
    {
      "name": "Mike",
      "marks":{
        "math":"67",
        "english":"86",
        ...
      }
    },
    ...
  ]
}

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 pháp

fetch("products.json")

Phươ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.

fetch("products.json")

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 phần tử chúng ta cần tạo ở đây là

fetch("products.json")

fetch("products.json")

Trướ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

fetch("products.json")

fetch("products.json")

fetch("products.json")

Lưu ý cấu trúc trên, trước tiên chúng ta tạo một phần tử

fetch("products.json")

fetch("products.json")

Phần tử

fetch("products.json")

fetch("products.json")

Bây giờ chúng ta có thể tạo vòng lặp for sẽ lặp qua mảng

fetch("products.json")

fetch("products.json")

fetch("products.json")

.then(function(response){
	return response.json();
})
		

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ử

fetch("products.json")

.then(function(response){
	return response.json();
})
		

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ử

fetch("products.json")

fetch("products.json")

.then(function(response){
	return response.json();
})
		

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ọ

Ví dụ

.then(function(products){

▶ 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.

.then(function(products){

Bây giờ chúng ta có thể tạo một vòng lặp for sẽ lặp qua mảng

fetch("products.json")

fetch("products.json")

fetch("products.json")

.then(function(products){

Cuối cùng, nối thêm bảng vào phần thân. Đây là mã Javascript hoàn chỉnh để tìm nạp dữ liệu JSON và hiển thị dưới dạng bảng

Ví dụ

.then(function(products){

▶ Dùng thử

đầu ra

Phần kết luận

Trong hướng dẫn ngắn này, chúng ta đã thấy cách tìm nạp và hiển thị dữ liệu JSON trong các trang HTML bằng javascript. Chúng tôi đã hiển thị dữ liệu dưới dạng danh sách và bảng với phần giải thích đầy đủ về mã

Làm cách nào để lấy dữ liệu JSON vào HTML?

Làm cách nào để tìm nạp dữ liệu từ tệp JSON và hiển thị trong bảng HTML?

Làm cách nào để hiển thị dữ liệu JSON thô trong HTML?

 block - jsfiddle.net/K83cK. – FullStack. .. .

 block..

Làm cách nào để hiển thị JSON dưới dạng bảng trong HTML?