Hiển thị dữ liệu api trong bảng html

Nhiệm vụ ở đây là chỉ ra cách sử dụng Fetch API để lấy dữ liệu từ API. Tôi sẽ lấy một API giả chứa thông tin chi tiết về nhân viên làm ví dụ và từ API đó. Tôi sẽ hiển thị để lấy dữ liệu bằng phương thức API tìm nạp ().  

Phương thức tìm nạp JavaScript(). Phương thức tìm nạp () hiện đại, linh hoạt và được hỗ trợ rất tốt trong các trình duyệt hiện đại. Nó có thể gửi các yêu cầu mạng đến máy chủ và tải thông tin mới bất cứ khi nào cần thiết mà không cần tải lại trình duyệt

cú pháp. Phương thức tìm nạp () chỉ có một đối số bắt buộc, đó là URL của tài nguyên bạn muốn tìm nạp

let response = fetch(api_url, [other params])

JavaScript không đồng bộ đang chờ. Trong ví dụ này, chúng ta sẽ sử dụng phương thức Async Await với phương thức fetch() để đưa ra lời hứa một cách ngắn gọn hơn. Các chức năng không đồng bộ được hỗ trợ trong tất cả các trình duyệt hiện đại

cú pháp

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

• Điều kiện tiên quyết. Tại đây, bạn sẽ cần một API để thực hiện thao tác tìm nạp () để lấy dữ liệu từ API đó. Bạn cũng có thể tạo API hoặc có thể sử dụng API giả miễn phí
• Ở đây API tôi đã sử dụng là. API này chứa thông tin chi tiết về nhân viên dưới dạng khóa. cặp giá trị. https. //thông tin nhân viên. tự do. người nuôi ong. com/của tôi/api/đường dẫn

Cách tiếp cận. Trước tiên hãy tạo tệp JavaScript, tệp HTML và tệp CSS cần thiết. Sau đó lưu trữ URL API trong một biến (ở đây api_url). Xác định hàm async (ở đây getapi()) và chuyển api_url vào hàm đó. Xác định một phản hồi liên tục và lưu trữ dữ liệu đã tìm nạp bằng phương thức chờ tìm nạp (). Xác định dữ liệu không đổi và lưu trữ dữ liệu ở dạng JSON bằng cách chờ phản hồi. phương thức json(). Bây giờ chúng tôi đã lấy dữ liệu từ API bằng phương thức tìm nạp () trong biến dữ liệu. Truyền biến dữ liệu này cho hàm sẽ hiển thị dữ liệu được tìm nạp.  

Hàm show lấy biến dữ liệu và bằng cách áp dụng vòng lặp for trên dữ liệu. danh sách và hiển thị tất cả các hàng, nó lưu trữ tất cả dữ liệu vào biến tab đặt thuộc tính InternalHTML cho lớp nhân viên trong tệp HTML. Tôi cũng đã thêm một trình tải tải cho đến khi có phản hồi

tệp JavaScript.  

Javascript

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

8

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

9

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

00

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

01

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

02

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

03

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

04

________ 105 ________ 10 ________ 11

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

2

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____14

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____16

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

2

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____19

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____981

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

82

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____984

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____986

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

87

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

88

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

89

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____991

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____993

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

91

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

95

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

96

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

03

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

98

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

0

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

000

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____1002

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

003

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

004

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

005

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

02

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

91

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

008

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

0

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

010

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____1012

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

88

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

014

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

015

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

016

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

015

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

018

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

015

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

020

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

015

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

022

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

023

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

024

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

2

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____1027

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____1029

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

030

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

88

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

032

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____1034

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____1036

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____1038

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____1040

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

024

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____991

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____1045

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____1002

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

048

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

049

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

91

tệp HTML.  

HTML

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

051

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

052

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

053

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

054

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

055

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

056

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

057

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____1052____100

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

057

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

88

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

052

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

04

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

05

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

055

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

07

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

08

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

04

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

057

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

88

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

052

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

13

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

14

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

055

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

16

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

17

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

055

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

19

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

20

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

88

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

052

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

23

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

24

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

055

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

26

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

20

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

88

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

052

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

23

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

31

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

055

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

33

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

34

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

35____1055

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

37

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

20

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

88

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

052

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

41

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

42

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

41

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

057

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____146

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

00

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

057

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____1052____151

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

057

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

88

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

54

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

55

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

56

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

88

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

052

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

59

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

60

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

055

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

62

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

057

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

64______1052

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

59

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

60

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

055

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

69

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

70

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

71

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

055

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

73

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

74

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

055

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

76

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

057

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

78

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

052

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

80

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

60

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

055

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

83

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

84

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

80

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

057

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

64____146

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

59

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

057

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

88

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

46

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

59

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

057

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

88

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

052

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

97

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

98

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

97

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

057

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

88

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

802

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

88

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

052

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

805

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

74

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

055

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

048

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

08

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

805

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

057

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3____146

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

51____1057

________ 146 ________ 1053 ________ 1057

đầu ra

• Trong bảng điều khiển, dữ liệu trong JSON sẽ trông như thế này.  

• Đầu ra HTML.  

JavaScript được biết đến nhiều nhất để phát triển trang web nhưng nó cũng được sử dụng trong nhiều môi trường không có trình duyệt. Bạn có thể học JavaScript từ đầu bằng cách làm theo Hướng dẫn JavaScript và Ví dụ về JavaScript này

Làm cách nào để lấy dữ liệu từ tệp JSON và hiển thị HTML bằng Javascript?

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

Tìm nạp trong HTML là gì?

Cách lấy dữ liệu từ API trong phản ứng?