Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách tìm nạp và hiển thị dữ liệu từ tệp JSON bằng cách sử dụng vanilla JavaScript. Vậy chúng ta sẽ đạt được…

Bạn đang xem: cách hiển thị dữ liệu json trong html

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách tìm nạp và hiển thị dữ liệu từ một tệp JSON sử dụng vanilla JavaScript.

Vậy làm cách nào để đạt được điều này?

Đầu tiên, chúng tôi sẽ tìm nạp dữ liệu JSON bằng cách sử dụng API tìm nạp. Điều này sẽ trả về một lời hứa với dữ liệu JSON của chúng tôi. Sau đó, chúng tôi sẽ nối dữ liệu động bằng cách tạo nhanh các phần tử HTML. Sau đó, chúng tôi sẽ nối dữ liệu JSON của mình vào các phần tử đó.

Lấy dữ liệu JSON từ một API và hiển thị nó trên một trang web là một điều phổ biến bạn sẽ làm khá thường xuyên. Tôi đã tạo các bài đăng tương tự trên các framework lớn như React , Vue Angular . Kiểm tra xem bạn có đang sử dụng bất kỳ khung nào trong số đó không.

Hãy bắt đầu!

Trước tiên, hãy tạo tệp people.json và điền vào dữ liệu sau:

 [
    {
        "id": "1",
        "firstName": "John",
        "lastName": "Doe"
    },
    {
        "id": "2",
        "firstName": "Mary",
        "lastName": "Peterson"
    },
    {
        "id": "3",
        "firstName": "George",
        "lastName": "Hansen"
    }
] 

Chúng tôi sẽ lưu tệp này trong cùng thư mục với tệp index.html của chúng tôi.

Tìm nạp dữ liệu JSON

Để có thể hiển thị dữ liệu này trong tệp HTML của chúng tôi, trước tiên, chúng tôi cần tìm nạp dữ liệu bằng JavaScript.

Chúng tôi sẽ tìm nạp dữ liệu này bằng cách sử dụng tìm nạp API . Chúng tôi sử dụng API tìm nạp theo cách sau:

 tìm nạp (url)
  .then (function (response) {
    // Dữ liệu JSON sẽ đến đây
  })
  .catch (function (err) {
    // Nếu xảy ra lỗi, bạn sẽ tìm thấy nó ở đây
  }); 

Tham số url được sử dụng trong hàm tìm nạp là nơi chúng tôi lấy dữ liệu JSON. Đây thường là một địa chỉ http. Trong trường hợp của chúng tôi, nó chỉ là tên tệp people.json . Chúng tôi không phải đi sâu vào bất kỳ thư mục nào vì tệp json nằm trong cùng thư mục với index.html của chúng tôi.

Hàm fetch sẽ trả về một lời hứa. Khi dữ liệu JSON được tìm nạp từ tệp, hàm then sẽ chạy với dữ liệu JSON trong phản hồi.

Nếu có vấn đề gì xảy ra (chẳng hạn như không tìm thấy tệp JSON) , hàm catch sẽ chạy.

Hãy để chúng tôi xem ví dụ này sẽ như thế nào trong ví dụ:

 fetch ('people.json ')
  .then (function (response) {
    trả về response.json ();
  })
  .then (hàm (dữ liệu) {
    appendData (dữ liệu);
  })
  .catch (function (err) {
    console.log (err);
  }); 

Tại đây, chúng tôi đang tìm nạp tệp people.json của mình. Sau khi tệp đã được đọc từ đĩa, chúng tôi chạy hàm then với phản hồi là một tham số. Để lấy dữ liệu JSON từ phản hồi, chúng tôi thực thi hàm json () .

Hàm json () cũng trả về một lời hứa. Đây là lý do tại sao chúng tôi chỉ trả lại nó và xâu chuỗi một hàm then khác. Trong hàm then thứ hai, chúng ta lấy dữ liệu JSON thực tế làm tham số. Dữ liệu này trông giống như dữ liệu trong tệp JSON của chúng tôi.

Xem Thêm  Cách thêm hình nền bằng CSS - mã nền hình ảnh html

Giờ đây, chúng tôi có thể lấy dữ liệu này và hiển thị trên trang HTML của mình. Lưu ý rằng chúng ta đang gọi một hàm có tên là appendData . Đây là nơi chúng tôi tạo mã sẽ nối dữ liệu vào trang của chúng tôi.

Lưu ý rằng trong hàm catch , chúng tôi chỉ viết thông báo lỗi ra bảng điều khiển. Thông thường, bạn sẽ hiển thị thông báo lỗi cho người dùng nếu có sự cố.

Hiển thị dữ liệu JSON

Trước khi chúng tôi hiển thị JSON của mình dữ liệu trên trang web, hãy chỉ xem phần nội dung của tệp index.html của chúng tôi trông như thế nào.

 & lt; body & gt;
  & lt; div id = "myData" & gt; & lt; / div & gt;
& lt; / body & gt; 

Khá đơn giản phải không? Chúng ta chỉ có một div đơn giản với id myData . Kế hoạch của chúng tôi là điền động dữ liệu JSON của chúng tôi vào bên trong div này.

Có một số cách để hiển thị dữ liệu trong HTML của chúng tôi. Chúng tôi có thể tạo một cái bàn và làm cho nó trông thật đẹp với kiểu dáng đẹp. Tuy nhiên, chúng tôi sẽ thực hiện việc này theo cách đơn giản và không đẹp mắt.

Mục tiêu của chúng tôi là chỉ hiển thị tên đầy đủ của những người trong tệp JSON của chúng tôi.

Bước 1 – Lấy phần tử div từ phần thân

Ghi nhớ div với id myData từ chỉ mục của chúng tôi. html ? Chúng tôi muốn tìm nạp div đó bằng JavaScript. Chúng tôi cần điều này vì chúng tôi sẽ điền vào div với những người trong tệp JSON của chúng tôi.

Đây là cách chúng tôi sẽ làm được điều đó:

 var mainContainer = document.getElementById ("myData"); 

Chúng tôi lấy phần tử bằng cách thực thi getElementByID hàm số. Thao tác này sẽ tìm phần tử có id myData . Đây là JavaScript đơn giản và đây là cách chúng tôi đã phát triển front-end ngày xưa :).

Bước 2 – Lặp qua mọi đối tượng trong đối tượng JSON của chúng tôi < / p>

Bước tiếp theo là tạo một vòng lặp đơn giản. Sau đó, chúng tôi có thể lấy mọi đối tượng trong danh sách đối tượng JSON và nối nó vào div chính của chúng tôi.

 for (var i = 0; i & lt; data.length; i ++) {
  // nối mỗi người vào trang của chúng tôi
} 

Bước 3 – Nối từng người vào trang HTML của chúng tôi

Trong vòng lặp for, chúng tôi sẽ nối từng người vào bên trong div. Mã này sẽ được lặp lại ba lần cho mỗi người.

Đầu tiên, chúng tôi sẽ tạo một phần tử div mới:

 var div = document.createElement ("div"); 

Tiếp theo, chúng ta sẽ điền vào div đó với tên đầy đủ từ tệp JSON của chúng ta.

 div.innerHTML = 'Name:' + data [i] .firstName + '' + data [i] .lastName; 

Cuối cùng, chúng ta sẽ thêm div này vào vùng chứa chính của chúng ta :

 mainContainer.appendChild (div); 

Vậy là xong. Bây giờ chúng tôi đã hoàn tất việc nối dữ liệu JSON vào trang index.html của chúng tôi. Hàm appendData đầy đủ trông giống như sau:

 function appendData ( dữ liệu) {
  var mainContainer = document.getElementById ("myData");
  for (var i = 0; i & lt; data.length; i ++) {
    var div = document.createElement ("div");
    div.innerHTML = 'Tên:' + data [i] .firstName + '' + data [i] .lastName;
    mainContainer.appendChild (div);
  }
} 

Khi chúng tôi chạy trang index.html của mình, nó sẽ trông giống như sau:

Không phải là ứng dụng đẹp nhất, nhưng nó đã hoàn thành công việc.

Hãy để chúng tôi xem xét toàn bộ tệp HTML bằng JavaScript:

 & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
    & lt; meta charset = "UTF-8" & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "ie = edge" & gt;
    & lt; title & gt; JSON Test & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
    & lt; div id = "myData" & gt; & lt; / div & gt;
    & lt; script & gt;
        tìm nạp ('people.json')
            .then (function (response) {
                trả về response.json ();
            })
            .then (hàm (dữ liệu) {
                appendData (dữ liệu);
            })
            .catch (function (err) {
                console.log ('error:' + err);
            });
        function appendData (dữ liệu) {
            var mainContainer = document.getElementById ("myData");
            for (var i = 0; i & lt; data.length; i ++) {
                var div = document.createElement ("div");
                div.innerHTML = 'Tên:' + data [i] .firstName + '' + data [i] .lastName;
                mainContainer.appendChild (div);
            }
        }
    & lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt; 

Cố gắng sao chép và dán tệp này vào trình chỉnh sửa của riêng bạn. Như một bài tập, bạn có thể cố gắng tạo kiểu cho đầu ra trông đẹp hơn. Hãy nhớ bao gồm cả tệp people.json . Tệp này phải nằm trong cùng thư mục với tệp index.html của bạn để tệp này hoạt động.

Tại sao sử dụng Vanilla JavaScript?

Bạn có thể tự hỏi việc tạo điều này trong JavaScript vani là gì. Ứng dụng web hiện đại không sử dụng các khung và thư viện như Angular, ReactJS hoặc VueJS?

Ồ, vâng, hầu hết thời gian, có lẽ bạn đúng. Nhưng một số trang web chỉ ở trạng thái tĩnh với rất ít logic.

Nếu bạn chỉ muốn chỉnh sửa một số phần nhỏ của trang web, thì việc đưa vào các thư viện lớn có thể là quá mức cần thiết, điều này sẽ làm chậm trang web.

Bên cạnh đó, các khuôn khổ và thư viện đến và đi. JavaScript vani cũ tốt ở đây để ở lại. Vì vậy, hãy tận dụng mọi cơ hội để tìm hiểu nó, bạn không biết khi nào mình cần nó.

Chúc bạn viết mã vui vẻ!


Xem thêm những thông tin liên quan đến chủ đề cách hiển thị dữ liệu json trong html

How to read JSON files into HTML using JavaScript’s fetch (no D3, no jQuery, vanilla JS!)

  • Tác giả: Jonathan Soma
  • Ngày đăng: 2020-09-04
  • Đánh giá: 4 ⭐ ( 6587 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Use JavaScript’s fetch function to read in a JSON file. No external libraries needed!

JSON PHP

  • Tác giả: vi.w3hmong.com
  • Đánh giá: 5 ⭐ ( 3722 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách sử dụng phổ biến của JSON là đọc dữ liệu từ máy chủ web và hiển thị dữ liệu trong một trang web.

Xử Lý Dữ Liệu JSON Đơn Giản Với Javascript

  • Tác giả: codelearn.io
  • Đánh giá: 3 ⭐ ( 5343 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JSON – Javascript Object Notation, là bộ quy tắc về cách trình bày và mô tả dữ liệu trong một chuỗi lớn thống nhất được gọi chung là chuỗi JSON.

Hướng dẫn xử lý JSON trong JavaScript

  • Tác giả: openplanning.net
  • Đánh giá: 3 ⭐ ( 7629 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Sử dụng file JSON trực tiếp trong HTML với sự hỗ trợ của Javascript

  • Tác giả: hoctoantap.com
  • Đánh giá: 4 ⭐ ( 4068 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khi xây dựng các ứng dụng web mà bạn muốn trả các file dữ liệu JSON về trình duyệt của người dùng tự xử lý dữ liệu file JSON để giảm tải cho server của

AJAX nhận dữ liệu JSON trong lập trình Website – HTML 13

  • Tác giả: namcoi.com
  • Đánh giá: 4 ⭐ ( 3303 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng kỹ thuật AJAX lấy dữ liệu dạng JSON từ API Endpoint để hiển thị bảng dữ liệu, hiển thị các bài viết kết hợp với CSS Framework Bootstrap 4.

HTML / Javascript: cách truy cập dữ liệu JSON được tải trong thẻ script với bộ src

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 9269 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Bạn không thể tải JSON như vậy, xin lỗi. Tôi biết bạn đang nghĩ “tại sao…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php