Cách tìm nạp và hiển thị dữ liệu JSON trong HTML bằng JavaScript – HowToCreateApps – html hiển thị dữ liệu json

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 như thế nào…

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

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 sử dụng JavaScript vani.

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

Trước 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 mà 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 điều 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à 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  Phân tích cú pháp XML trong JavaScript - cách phân tích cú pháp xml trong javascript

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 tôi đ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ẽ thực hiện đ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 :).

Xem Thêm  Làm thế nào để làm toán trong JavaScript với các toán tử - các phép toán trong javascript

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 từng 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 tôi sẽ điền vào div đó với tên đầy đủ từ tệp JSON của chúng tôi.

 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 (data) {
            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 sao?

Vâng, đúng vậy có lẽ đúng, hầu hết thời gian. 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ủ đề html hiển thị dữ liệu json

Json server tạo file json và load dữ liệu từ file json

  • Tác giả: Coder Poly
  • Ngày đăng: 2021-06-03
  • Đánh giá: 4 ⭐ ( 5843 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: jsonjsonserverloadfilejson
    Json server, tạo file json, và ,load dữ liệu, từ file json,

JSON

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

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 ⭐ ( 7745 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…

TUẦN TỰ HÓA DỮ LIỆU VÀ ĐỊNH DẠNG DỮ LIỆU JSON –

  • Tác giả: vnpro.vn
  • Đánh giá: 5 ⭐ ( 5980 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Phần 6 (Phần cuối): JSON và Ajax trong Javascript

  • Tác giả: xdevclass.com
  • Đánh giá: 3 ⭐ ( 7057 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JSON JSON (JavaScript Object Notation) là một chuỗi text được viết dưới dạng Javascript Object dùng để lưu trữ và trao đổi dữ liệu. JSON thường được dùng

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

  • Tác giả: codelearn.io
  • Đánh giá: 4 ⭐ ( 8502 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.

JSON: JSON PHP

  • Tác giả: v1study.com
  • Đánh giá: 3 ⭐ ( 6826 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. Bài viết này sẽ hướng dẫn bạn cách trao đổi dữ liệu

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