Javascript hiển thị dữ liệu 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"

Cách tiếp cận. Chúng tôi có một tệp JSON chứa dữ liệu ở dạng một mảng các đối tượng. Trong mã của chúng tôi, chúng tôi đang sử dụng jQuery để hoàn thành nhiệm vụ của mình. Mã jQuery sử dụng phương thức getJSON[] để tìm nạp dữ liệu từ vị trí của tệp bằng cách sử dụng yêu cầu AJAX HTTP GET. Phải mất hai đối số. Một là vị trí của tệp JSON và một là hàm chứa dữ liệu JSON. Hàm each[] được sử dụng để lặp qua tất cả các đối tượng trong mảng. Nó cũng có hai đối số. Một là dữ liệu và một là hàm chứa chỉ mục và phần tử. Một chuỗi rỗng được sử dụng để xây dựng các hàng chứa dữ liệu từ các đối tượng JSON. Phương thức append[] được sử dụng để nối chuỗi chứa các hàng trong bảng

tệp JSON

Thí dụ