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ụ

<

fetch("products.json")

0

fetch("products.json")

1

fetch("products.json")

2

fetch("products.json")

3

fetch("products.json")

4

fetch("products.json")

5

<

fetch("products.json")

7

fetch("products.json")

4

fetch("products.json")

00<

fetch("products.json")

02

fetch("products.json")

03

fetch("products.json")

2

fetch("products.json")

05

fetch("products.json")

4

fetch("products.json")

00<

fetch("products.json")

09

fetch("products.json")

10

fetch("products.json")

09

fetch("products.json")

4

fetch("products.json")

5

fetch("products.json")

00

fetch("products.json")

15

fetch("products.json")

00<

fetch("products.json")

18

fetch("products.json")

19

fetch("products.json")

2

fetch("products.json")

21

fetch("products.json")

4

fetch("products.json")

00

fetch("products.json")

24

fetch("products.json")

18

fetch("products.json")

4

fetch("products.json")

5

fetch("products.json")

00

fetch("products.json")

29

fetch("products.json")

00<____132

fetch("products.json")

4

fetch("products.json")

34

fetch("products.json")

35

fetch("products.json")

36

fetch("products.json")

37

fetch("products.json")

36

fetch("products.json")

39

fetch("products.json")

36

fetch("products.json")

41

fetch("products.json")

34

fetch("products.json")

43

fetch("products.json")

5

fetch("products.json")

34

fetch("products.json")

46

fetch("products.json")

36

fetch("products.json")

48

fetch("products.json")

36

fetch("products.json")

50

fetch("products.json")

36

fetch("products.json")

52

fetch("products.json")

36

fetch("products.json")

54

fetch("products.json")

55

fetch("products.json")

56

fetch("products.json")

55

fetch("products.json")

58

fetch("products.json")

34

fetch("products.json")

43

fetch("products.json")

5

fetch("products.json")

34<3

fetch("products.json")

36<5

fetch("products.json")

36

fetch("products.json")

41

fetch("products.json")

34

fetch("products.json")

43

fetch("products.json")

5

fetch("products.json")

34

fetch("products.json")

72

fetch("products.json")

34<3

fetch("products.json")

36

fetch("products.json")

76

fetch("products.json")

36

fetch("products.json")

41

fetch("products.json")

36

fetch("products.json")

40

fetch("products.json")

36

fetch("products.json")

48

fetch("products.json")

34

fetch("products.json")

43

fetch("products.json")

5

fetch("products.json")

34<3

fetch("products.json")

36

fetch("products.json")

49

fetch("products.json")

34

fetch("products.json")

43

fetch("products.json")

00

fetch("products.json")

24

fetch("products.json")

32

fetch("products.json")

4

fetch("products.json")

24

fetch("products.json")

7

fetch("products.json")

4

fetch("products.json")

5

<

fetch("products.json")

011____14

fetch("products.json")

00<

fetch("products.json")

015

fetch("products.json")

4

fetch("products.json")

34<

fetch("products.json")

019

fetch("products.json")

020

fetch("products.json")

019

fetch("products.json")

4

fetch("products.json")

5

fetch("products.json")

34

fetch("products.json")

025

fetch("products.json")

34<

fetch("products.json")

028

fetch("products.json")

029

fetch("products.json")

2

fetch("products.json")

031____14

fetch("products.json")

36

fetch("products.json")

034

fetch("products.json")

36<

fetch("products.json")

037

fetch("products.json")

4

fetch("products.json")

55<

fetch("products.json")

041

fetch("products.json")

042

fetch("products.json")

041

fetch("products.json")

4

fetch("products.json")

55<

fetch("products.json")

041

fetch("products.json")

048

fetch("products.json")

041

fetch("products.json")

4

fetch("products.json")

55<

fetch("products.json")

041

fetch("products.json")

054

fetch("products.json")

041

fetch("products.json")

4

fetch("products.json")

55<

fetch("products.json")

041

fetch("products.json")

060

fetch("products.json")

041

fetch("products.json")

4

fetch("products.json")

36

fetch("products.json")

24

fetch("products.json")

037

fetch("products.json")

4

fetch("products.json")

5

fetch("products.json")

36<

fetch("products.json")

18

fetch("products.json")

4

fetch("products.json")

55

fetch("products.json")

073

fetch("products.json")

5

fetch("products.json")

075

fetch("products.json")

076

fetch("products.json")

075

fetch("products.json")

078

fetch("products.json")

079

fetch("products.json")

080

fetch("products.json")

081

fetch("products.json")

082

fetch("products.json")

5

fetch("products.json")

081

fetch("products.json")

085

_______1081____1087

fetch("products.json")

5

fetch("products.json")

079

fetch("products.json")

090

fetch("products.json")

079

fetch("products.json")

092

________ 1079 ________ 1094 ________ 1037 ________ 1096

fetch("products.json")

079

fetch("products.json")

094

fetch("products.json")

099

fetch("products.json")

100

fetch("products.json")

101

fetch("products.json")

102

fetch("products.json")

099

fetch("products.json")

096

fetch("products.json")

5

fetch("products.json")

079

fetch("products.json")

094

fetch("products.json")

099

fetch("products.json")

100

fetch("products.json")

101

fetch("products.json")

111

fetch("products.json")

099

fetch("products.json")

096

fetch("products.json")

5

fetch("products.json")

079

fetch("products.json")

094

fetch("products.json")

099

fetch("products.json")

100

________ 1101 ________ 1120 ________ 1099 ________ 1096

fetch("products.json")

5

fetch("products.json")

079

fetch("products.json")

094

fetch("products.json")

099

fetch("products.json")

100

fetch("products.json")

101

fetch("products.json")

129

fetch("products.json")

099

fetch("products.json")

096

fetch("products.json")

5

________ 1079 ________ 1134 ________ 1037 ________ 1096

_______1081____1138

fetch("products.json")

139

fetch("products.json")

081

fetch("products.json")

141

_______1081____1143

fetch("products.json")

075

fetch("products.json")

138

fetch("products.json")

55

fetch("products.json")

138

fetch("products.json")

36

fetch("products.json")

24

fetch("products.json")

18

fetch("products.json")

4

fetch("products.json")

00

fetch("products.json")

24

fetch("products.json")

015

fetch("products.json")

4

fetch("products.json")

24

fetch("products.json")

011

fetch("products.json")

4

fetch("products.json")

5

fetch("products.json")

24

fetch("products.json")

0

fetch("products.json")

4

đầu ra

HTML là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách cấu trúc các trang web và ứng dụng web. Bạn có thể học HTML từ đầu bằng cách làm theo Hướng dẫn HTML và Ví dụ về HTML này

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