Trong hướng dẫn này, tôi sẽ giải thích cách bạn có thể hiển thị dữ liệu JSON trong bảng HTML bằng cách sử dụng jquery động. Khi tôi nhận nhiệm vụ này từ người quản lý dự án của mình thì tôi ….

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

Trong hướng dẫn này, tôi sẽ giải thích cách bạn có thể hiển thị dữ liệu JSON trong bảng HTML bằng cách sử dụng jquery động.

Khi tôi nhận được nhiệm vụ này từ dự án của mình người quản lý thì tôi đang tìm bất kỳ plugin jQuery hoặc javascript nào tạo bảng động bằng dữ liệu JSON.

Vì tôi không muốn xác định tiêu đề và các cột, nên plugin sẽ đọc các khóa trong Dữ liệu JSON và tạo các cột và tiêu đề của bảng.

Về cơ bản, nhiệm vụ của tôi là chuyển đổi dữ liệu JSON sang một bảng HTML.
Nhưng sau đó, tôi quyết định viết mã của riêng mình thay vì sử dụng mã thứ ba -cung cấp bên. vì vậy ở đây tôi cũng sẽ chia sẻ mã của mình với các nhà phát triển khác.

Mục đích của bài viết này là giải thích cách bạn có thể tạo bảng một cách động từ một mảng JSON trong javascript.

>

Trong bài viết này, chúng tôi sẽ trình bày các điểm dưới đây trong

  • Điền vào bảng html với dữ liệu json
  • Cách tạo bảng động với dữ liệu JSON?
  • Hiển thị dữ liệu json trong bảng html bằng cách sử dụng jquery động
  • Chuyển đổi dữ liệu json vào bảng html

Tôi có dữ liệu mảng JSON chứa nhân viên có ‘EmployeeID’, ‘EmployeeName’, ‘Address’, ‘City’ , Trường ‘Quốc gia’.

 

var

Employess

=

[ {

"ID nhân viên"

:

"1"

,

"Tên nhân viên"

:

"Hanari Carnes"

,

"Địa chỉ"

:

"Rua do Paço, 67 tuổi"

,

"Thành phố"

:

"Rio de Janeiro"

,

"Quốc gia"

:

"Braxin"

}, {

"ID nhân viên"

:

"2"

,

"Tên nhân viên"

:

"Wolski"

,

"Địa chỉ"

:

"ul. Filtrowa 68"

,

"Thành phố"

:

"Walla"

,

"Quốc gia"

:

"Ba Lan"

}, {

"ID nhân viên"

:

"3"

,

"Tên nhân viên"

:

"Lehmanns Marktstand"

,

"Địa chỉ"

:

"Magazinweg 7"

,

"Thành phố"

:

"Frankfurt a.M."

,

"Quốc gia"

:

"Đức"

} , {

"ID nhân viên"

:

"4"

,

"Tên nhân viên"

:

"Hãy dừng lại N mua sắm"

,

"Địa chỉ"

:

"87 Polk St. Suite 5"

,

"Thành phố"

:

"San Francisco"

,

"Quốc gia"

:

"Hoa Kỳ"

}, {

"ID nhân viên"

:

"5"

,

"Tên nhân viên"

:

"Cửa hàng Kountry K lười biếng"

,

"Địa chỉ"

:

"Sân thượng 12 dàn nhạc"

,

"Thành phố"

:

"Walla Walla"

,

"Quốc gia"

:

"Hoa Kỳ"

} , {

"ID nhân viên"

:

"6"

,

"Tên nhân viên"

:

"Giao dịch trên đảo"

,

"Địa chỉ"

:

"Garden House Crowther Way"

,

"Thành phố"

:

"Những con bò"

,

"Quốc gia"

:

"Vương quốc Anh"

} ]

Bây giờ tôi muốn tạo một bảng từ JSON nhân viên này bằng Javascript.

Chuyển đổi dữ liệu mảng json thành bảng html

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
    & lt; title & gt; Sử dụng JQuery để Thêm Chỉnh sửa Xóa Hàng trong Bảng & lt; / title & gt;
    & lt; link rel = 

"stylesheet"

href =

"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap .min.css "

& gt; & lt; script src =

"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"

& gt; & lt; / script & gt ; & lt; script src =

"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"

& gt; & lt; / script & gt; & lt; link rel =

"stylesheet"

href =

"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7 .0 / css / font-awesome.min.css "

/ & gt; & lt; / head & gt; & lt; body & gt; & lt; div

class

=

"container"

& gt; & lt; h1 & gt; Danh sách Nhân viên & lt; / h1 & gt; & lt; br / & gt; & lt; div id =

"Employeedivcontainer"

& gt; & lt; / div & gt; & lt; / div & gt; & lt; / body & gt; & lt; / html & gt; & lt; script type =

"text / javascript"

& gt;

var

Employess = [ {

"EmployeeID"

:

"1"

,

"EmployeeName"

:

"Hanari Carnes"

,

"Địa chỉ"

:

"Rua do Paço, 67 tuổi"

,

"Thành phố"

:

"Rio de Janeiro"

,

"Quốc gia"

:

"Brazil"

}, {

"EmployeeID"

:

"2"

,

"EmployeeName"

:

"Wolski"

,

"Địa chỉ"

:

"ul. Filtrowa 68"

,

"Thành phố"

:

"Walla"

,

"Quốc gia"

:

"Ba Lan"

}, {

"EmployeeID"

:

"3"

,

"EmployeeName"

:

"Lehmanns Marktstand"

,

"Địa chỉ"

:

"Magazinweg 7"

,

"Thành phố"

:

"Frankfurt a.M."

,

"Quốc gia"

:

"Đức"

} , {

"EmployeeID"

:

"4"

,

"EmployeeName"

:

"Let's Stop N Shop"

,

"Địa chỉ"

:

"87 Polk St. Suite 5"

,

"Thành phố"

:

"San Francisco"

,

"Quốc gia"

:

"Hoa Kỳ"

}, {

"EmployeeID"

:

"5"

,

"EmployeeName"

:

"Lazy K Kountry Store"

,

"Địa chỉ"

:

"12 Orchestra Terrace"

,

"Thành phố"

:

"Walla Walla"

,

"Quốc gia"

:

"Hoa Kỳ"

} , {

"EmployeeID"

:

"6"

,

"EmployeeName"

:

"Island Trading"

,

"Địa chỉ"

:

"Garden House Crowther Way"

,

"Thành phố"

:

"Những con bò"

,

"Quốc gia"

:

"Vương quốc Anh"

} ] convertJsontoHtmlTable (); function convertJsontoHtmlTable () {

// Nhận giá trị cho tiêu đề bảng

// {'EmployeeID', 'EmployeeName', 'Address', 'City', 'Country'}

var

tablecolumns = [];

for

(

var

i = 0; i & lt; Employess.length; i ++) {

for

(

var

key

in

Employess [i]) {

if

(tablecolumns.indexOf (key) === -1) { tablecolumns.push (key); } } }

// Tạo bảng html và thêm lớp vào đó

var

tableemployee = document.createElement (

"table"

); tableemployee.classList.add (

"table"

); tableemployee.classList.add (

"table-sọc"

); tableemployee.classList.add (

"table-Armor"

); tableemployee.classList.add (

"table-hover"

)

// Tạo tiêu đề của bảng HTML bằng

// tr

var

tr = tableemployee.insertRow (-1);

for

(

var

i = 0; i & lt; tablecolumns.length; i ++) {

// tiêu đề

var

th = document.createElement (

"th"

); th.innerHTML = tablecolumns [i]; tr.appendChild (th); }

// Thêm dữ liệu JSON của nhân viên vào bảng dưới dạng tr hoặc hàng

for

(

var

i = 0; i & lt; Employess.length; i ++) { tr = tableemployee.insertRow (-1);

for

(

var

j = 0; j & lt; tablecolumns.length; j ++) {

var

tabCell = tr.insertCell (-1); tabCell.innerHTML = Employess [i] [tablecolumns [j]]; } }

// Bước cuối cùng, nối bảng html vào vùng chứa div

var

Employeedivcontainer = document.getElementById (

"Employeedivcontainer"

); Employeedivcontainer.innerHTML =

""

; Employeedivcontainer.appendChild (tableemployee); } & lt; / script & gt;

Xem Thêm  Câu lệnh SQL: ALTER TABLE - thay đổi bảng thay đổi ô

Giải thích mã

Tôi đang lặp lại mảng nhân viên để trích xuất các tiêu đề của bảng.

 

// Nhận giá trị cho tiêu đề bảng

// {'EmployeeID', 'EmployeeName', 'Address', 'City', 'Country'}

var

tablecolumns

=

[];

cho

(

var

i

​​=

0

; i

​​& lt;

Employess.length; i

++

) {

cho

(

var

key

in

Employess [i]) {

if

(tablecolumns.indexOf (key)

===

-

1

) { tablecolumns.push (key); } } }

Ở đây chúng tôi đang tạo một phần tử bảng HTML và thêm lớp vào đó.

 

// Tạo bảng html và thêm lớp đến nó

var

tableemployee

=

document

.createElement (

"table"

); tableemployee.classList.add (

"bảng"

); tableemployee.classList.add (

"bảng sọc"

); tableemployee.classList.add (

"khung bao quanh bảng"

); tableemployee.classList.add (

"di chuột qua bảng"

)

chúng tôi tạo tiêu đề của bảng HTML bằng cách sử dụng

 

// Tạo tiêu đề của bảng HTML bằng cách sử dụng

// tr

var

tr

=

tableemployee.insertRow (

-

1

);

cho

(

var

i

​​=

0

; i

​​& lt;

tablecolumns.length; i

++

) {

// tiêu đề

var

th

=

tài liệu

.createElement (

"th"

); th.innerHTML

=

cột bảng [i]; tr.appendChild (th); }

Thêm dữ liệu JSON của nhân viên trong bảng

 

// Tạo tiêu đề của bảng HTML bằng

// tr

var

tr

=

tableemployee.insertRow (

-

1

);

cho

(

var

i

​​=

0

; i

​​& lt;

tablecolumns.length; i

++

) {

// tiêu đề

var

th

=

tài liệu

.createElement (

"th"

); th.innerHTML

=

cột bảng [i]; tr.appendChild (th); }

Nối bảng HTML vào vùng chứa div

 

// Bước cuối cùng, nối bảng html vào vùng chứa div

var

Employeedivcontainer

=

tài liệu

.getElementById (

"Employeedivcontainer"

); Employeedivcontainer.innerHTML

=

""

; Employeedivcontainer.appendChild (tableemployee);

Khái niệm cơ bản về JSON

JSON là một ‘định dạng dữ liệu nhẹ’ có thể dễ hiểu, rất dễ dàng cho bất kỳ máy nào phân tích cú pháp và tạo ra nó . Trước JSON, XML (Ngôn ngữ đánh dấu mở rộng) được sử dụng làm định dạng dữ liệu chính bên trong các dịch vụ web. Nhưng sau khi JSON ra đời, việc sử dụng XML đã giảm đi rất nhiều. Bởi vì nó là một định dạng rất nhẹ so với XML.

Một tệp JSON có thể được nhận dạng bằng phần mở rộng ”.json”. Dữ liệu JSON được giữ bên trong tệp .json. Tệp JSON bao gồm văn bản thuần túy dễ đọc và dễ hiểu. Tệp .json có thể được mở và kiểm tra và có thể được gửi qua Internet mà không gặp bất kỳ sự cố nào.

Dạng đầy đủ của JSON là “JavaScript Object Notation”, trong khi dạng đầy đủ của XML là “Ngôn ngữ đánh dấu mở rộng ”.

JSON là một định dạng dựa trên văn bản đơn giản, trong khi nó là Ngôn ngữ đánh dấu.

JSON rất phổ biến vì nó là một định dạng nhẹ, trong khi XML chứa các thẻ, thuộc tính, v.v … Vì điều này, nó nặng hơn.

Nó không hỗ trợ không gian tên và bình luận, hỗ trợ bình luận và không gian tên trong XML.

Dữ liệu trong JSON nằm trong cặp khóa và giá trị và giống như một đối tượng đơn giản. Trong khi dữ liệu trong XML ở định dạng thẻ, hơi khó so với JSON nên ngày nay JSON đang được sử dụng trong hầu hết các ứng dụng phần mềm.

Tính năng

  • JSON là định dạng có thể đọc được của con người, có thể dễ dàng hiểu và đọc bởi bất kỳ ai.
  • JSON còn được gọi là ngôn ngữ độc lập vì nó không hoạt động với bất kỳ ngôn ngữ nào.
  • Nó hỗ trợ tất cả các ngôn ngữ phổ biến các ngôn ngữ lập trình như JAVA, PYTHON, C, C ++, C #, PHP, v.v.
  • Nó rất dễ truy cập và tổ chức.
  • Ưu điểm quan trọng nhất của nó là nó rất định dạng nhẹ.
  • Do JSON, quá trình phân tích cú pháp phía máy chủ rất nhanh để phản hồi có thể được gửi đến người dùng trong thời gian ngắn nhất có thể.
  • Nó hỗ trợ tất cả các trình duyệt và hoạt động hệ thống.
  • Bất kỳ loại tệp phương tiện nào như Video, Âm thanh, Hình ảnh và bất kỳ loại thông tin nhị phân nào đều không thể được chuyển qua JSON.
  • Không có lỗi xử lý bên trong JSON. < / li>
  • Một trong những nhược điểm nguy hiểm nhất của JSON là khi bạn sử dụng bất kỳ dịch vụ và trình duyệt không đáng tin cậy nào, dịch vụ cung cấp phản hồi JSON được bao bọc sẽ làm tăng khả năng ứng dụng của bạn bị tấn công.

Bài đăng Hiển thị dữ liệu JSON trong bảng HTML bằng JavaScript động xuất hiện đầu tiên trên Software Development | Hướng dẫn lập trình .


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

#5 Using JSON data – Đọc File JSON Với Javascript Thuần “Chủng” | JavaScript Nâng Cao Cho Beginners

  • Tác giả: Hỏi Dân IT
  • Ngày đăng: 2021-11-12
  • Đánh giá: 4 ⭐ ( 1731 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong video này, chúng ta sẽ làm việc với kiểu dữ liệu JSON, cũng như cách đọc File JSON bằng javascript thuần.
    Chi tiết và cụ thể, các bạn cùng theo dõi video này nhé ❤
    —–
    🌹Bạn nào muốn donate hay mua cho mình cốc cà phê, cái pizza hay chỉ là gói mì tôm hảo hảo, tiếp thêm động lực cho mình làm nhiều video chất lượng, thì các bạn có thể liên hệ qua:
    🤝Dùng MoMo quét mã QR tại link này nhé: https://nhantien.momo.vn/hoidanit (lưu ý: tên người nhận là PHAM VAN TUAN)

    😁Mình có 1 channel khác (Tiếng Anh, tên là haryphamdev), nên là có 2 Fanpage Facebook: Link channel Tiếng Anh: https://www.youtube.com/channel/UCHqJxLo7mKam9GKqqwr2wfA
    1. Facebook Fanpage (Tiếng việt): https://www.facebook.com/askITwithERIC
    2. Facebook Fanpage (Tiếng anh): https://www.facebook.com/haryphamdev
    —–

    🚀 Khóa học Free FullStack SERN (SQL, Express, React, Node.js): https://www.youtube.com/watch?v=21tjOW8BvB4&list=PLncHg6Kn2JT6E38Z3kit9Hnif1xC_9VqI

    👀 Khóa Học React Hook Function Component Từ A đến Z cho Beginners: https://www.youtube.com/watch?v=_gZTmBF7__M&list=PLncHg6Kn2JT4xzJyhXfmJ53dzwVbq-S_E

    👀 Khóa Học React Class Component Từ A đến Z cho Beginners: https://www.youtube.com/watch?v=ONnlXF4mpIg&list=PLncHg6Kn2JT4C0enPGQPK7ZIlEoZ1ZvRy

    👀 Khóa Học Javascript Siêu Cơ Bản Từ A đến Z cho Beginners: https://www.youtube.com/watch?v=2Uthlmwd2bI&list=PLncHg6Kn2JT5dfQqpVtfNYvv3EBVHHVKo

    🎁 Tài liệu tham khảo sử dụng trong video:

    👉 Fix lỗi load file JSON: https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local

    👉 Nội dung khóa học: https://docs.google.com/document/d/1_UZzrezLClYBu-H_rddgSztAFiXKqdtNivhvumE4M4o/edit?usp=sharing

    👉 Xem full khóa học này tại đây : https://www.youtube.com/watch?v=IkKDSS_6qy4&list=PLncHg6Kn2JT4eGJ__iQv6BrvL_YnZLHyX

    ———————————— IMPORTANT —————————–
    🚀 Learn by doing : Hiện tại, mình đang làm 1 series miễn phí, học và thực hành để trở thành 1 fullstack web developer từ A đến Z. Và để thực hiện được mục tiêu này, khóa học này chính là thứ rất cần thiết dành cho các bạn beginners – JavaScript Nâng Cao – Những kiến thức cần biết để sử dụng thành thạo Javascript “hiện đại” ngày nay.

    1️⃣ Các bạn nhận được gì khi kết thúc khóa học?

    ✔ Các bạn hiểu được Javascript có thể làm những gì, những keywords cần biết như là async, await, Promise…, chúng ta sẽ chú trọng vào những kiến thức cơ bản nhưng cốt lõi nhất.

    Phương châm của mình luôn là “chỉ nên học những cái mà các công ty cần”, không nên học tràn lan, tỏ ra ta đây cái gì cũng biết, cơ mà bản chất lại không biết (hiểu) gì.

    Các bạn nên nhớ rằng, đối với những người mới bắt đầu, nên đi chậm nhưng mà chắc, không cần code siêu, chỉ cần biết cách ‘google search’ là được.

    2️⃣ Nội dung khóa học ?
    ✔Mình dự định sẽ làm 1 series hướng dẫn full từ A đến Z những kiến thức căn bản(cốt lõi) của Javascript cho những bạn chưa biết gì, những người mới bắt đầu dấn thân vào học và thành thạo Javascript

    ✔Khóa này chính là bước đệm để các bạn có thể chuẩn bị một công cụ cũng như kiến thức cần thiết, từ đó có thể làm những cái to tát hơn, như làm game, app và website thực tế.

    3️⃣ Công nghệ sử dụng ?
    ✔ HTML, CSS và Javascript.

    4️⃣ Lịch trình ra video ?
    Hiện tại, mình đang đi làm fulltime, vì vậy không thể dành 100% thời gian làm video khóa học này được. Tuy nhiên, mình luôn cố gắng để làm video đều đặn và thường xuyên, vì mình nhận được rất nhiều tin nhắn cũng như comment của các bạn, mong muốn được học khóa học này ❤
    👉 Tối thiểu là 1 tuần sẽ có 2 video về khóa học, còn đôi khi mình có nhiều thời gian rảnh thì 1 tuần 7 cái luôn 😁

    👉Các bạn muốn video ra nhanh thì đừng quên Đăng Ký Kênh, Like, Share và Comment bên dưới video để mình có thêm động lực làm video nha. Cảm ơn các bạn nhiều 💕💕💕

    👉 Đây là video thứ tự 4 trong khóa học này

    ———————————— IMPORTANT —————————–

    🧠 Nội dung video:
    0:00 Giới thiệu
    1:00 JSON là gì
    3:05 Convert Text to JSON
    4:20 Convert JSON to String
    6:30 Viết JSON
    8:25 Load file JSON

    🌎 Tìm mình tại đây:
    1. Facebook Fanpage (Tiếng việt): https://www.facebook.com/askITwithERIC
    2. Facebook Fanpage (Tiếng anh): https://www.facebook.com/haryphamdev
    3. Group trao đổi học tập Facebook: https://www.facebook.com/groups/hoidanit
    4. Github: https://github.com/haryphamdev
    5. Youtube channel: https://www.youtube.com/channel/UCVkBcokjObNZiXavfAE1-fA
    6. Email: haryphamdev@gmail.com

    ĐỪNG QUÊN NHẤN CHUÔNG 🔔 ĐỂ NHẬN CẬP NHẬT VIDEO MỚI NHẤT CŨNG NHƯ ► ĐĂNG KÝ KÊNH! ► https://bit.ly/31P4KhK

    KhoaHocJavaScriptNangCao JavaScript HoiDanIT

Tìm hiểu về JSON trong JavaScript

  • Tác giả: completejavascript.com
  • Đánh giá: 3 ⭐ ( 1100 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết này mình sẽ tìm hiểu tổng quan về JSON, ứng dụng và cách sử dụng JSON trong JavaScript. Ngoài ra, mình cũng so sánh JSON với JavaScript Object.

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

Sử Dụng JSON Server và Cách Fetching Data Bằng useEffect

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 3 ⭐ ( 7603 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngày hôm nay chúng ta cùng nhau đi vào tìm hiểu cách sử dụng JSON Server và Cách Fetching Data Bằng useEffect trong dự án React JS nhé.

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á: 5 ⭐ ( 5977 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

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

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

Cách làm việc với JSON trong JavaScript

  • Tác giả: galaxyz.net
  • Đánh giá: 4 ⭐ ( 8720 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vì JSON có nguồn root từ ngôn ngữ lập trình JavaScript nên việc sử dụng làm định dạng dữ liệu trong JavaScript là một lựa chọn tự nhiên. JSON, viết tắt của JavaScript Object Notation , thường được phát âm giống như tên “Jason”.

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