Cách tìm nạp và hiển thị dữ liệu JSON trong HTML bằng JavaScript – HowToCreateApps – nhập tệp json sang 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ừ 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: nhập tệp json vào 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ừ JSON tệp sử dụng JavaScript vani.

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 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  C Hàm chuỗi - chuỗi trong lập trình c

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 :).

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ủ đề nhập tệp json sang 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 ⭐ ( 6879 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!

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

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

Chuyển đổi JSON sang HTML trực tuyến

  • Tác giả: products.groupdocs.app
  • Đánh giá: 5 ⭐ ( 1882 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Công cụ chuyển đổi tài liệu JSON sang HTML – chuyển đổi JSON sang HTML trực tuyến miễn phí, không cần đăng ký. Chuyển đổi JSON sang HTML an toàn và dễ sử dụng!

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á: 4 ⭐ ( 2563 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…

Chuyển đổi HTML sang JSON trực tuyến

  • Tác giả: bfotool.com
  • Đánh giá: 5 ⭐ ( 5812 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Công cụ trực tuyến miễn phí này cho phép bạn chuyển đổi tệp HTML thành tệp JSON. Không cần tải xuống hoặc cài đặt bất kỳ phần mềm nào. Nhấp để chuyển đổi tệp của bạn ngay bây giờ.

Mã hóa / giải mã JSON

  • Tác giả: vi.rakko.tools
  • Đánh giá: 4 ⭐ ( 1409 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nhập một mảng trong khu vực đầu vào bên trái và nhấp vào nút mã hóa để mã hóa nó thành một chuỗi JSON.Nhập chuỗi JSON vào khu vực nhập bên phải và nhấp vào nút giải mã để giải mã nó thành một mảng.JSON là gì?Viết tắt cho Ký hiệu đối tượng JavaScript, định dạng dữ liệu dựa trên văn bản tương tự nh…

JSON là file gì? Phần mềm & cách mở file . JSON, sửa file lỗi

  • Tác giả: filegi.com
  • Đánh giá: 4 ⭐ ( 1285 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: File .JSON là file gì? Cách mở file .JSON – Web Files – JavaScript Object Notation File – Text – N/A? Danh sách phần mềm mở file .JSON và sửa file lỗi. Chuyển đồi file Convert .JSON to sang định dạng khác.

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