Xử lý JSON với jQuery | Học jQueryLearning jQuery

Bạn đang xem: tạo đối tượng json jquery

JSON (JavaScript Object Notation) là một cách để lưu trữ thông tin một cách có tổ chức. Đây là định dạng trao đổi dữ liệu được ưa thích vì ngắn hơn, nhẹ, con người có thể đọc được và không yêu cầu thẻ như XML. Điều này cho phép xử lý và truyền tải nhanh hơn, đồng thời việc tuần tự hóa và giải mã hóa cũng trở nên nhanh hơn nhiều khi so sánh với XML. JSON được trả về thông qua API REST được sử dụng theo những cách khác nhau ở phía máy khách. Bạn có thể điền dữ liệu vào các phần tử HTML, hiển thị JSON trên giao diện người dùng sau khi định dạng và chuyển đổi nó thành CSV để xuất. Bài đăng này cung cấp các giải pháp jQuery để định dạng JSON, chuyển đổi nó sang định dạng CSV và hiển thị dữ liệu JSON trong bảng HTML. Hãy bắt đầu!

Định dạng JSON trong jQuery

JSON chưa định dạng không thể đọc được bởi con người và hầu hết thời gian JSON do API REST trả về không được định dạng, do đó không thể hiển thị trực tiếp trên giao diện người dùng. Có nhiều cách khác nhau để định dạng nó. Sử dụng triển khai của riêng bạn hoặc các plugin của bên thứ ba. Định dạng JSON bằng jQuery có thể được thực hiện dễ dàng và chỉ cần 2 lệnh gọi hàm.

  1. JSON.parse () – Để phân tích cú pháp một chuỗi JSON và chuyển đổi nó thành một đối tượng JavaScript.
  2. JSON.stringify () – Chuyển đổi một đối tượng JavaScript thành một chuỗi. Bạn cũng có thể áp dụng thụt lề bằng cách chuyển một giá trị tùy chọn.

Mã jQuery sau đây định dạng một chuỗi JSON:

 

var jData = '[{"fname": "Mark", "lname": "Wood", "company": "Apple"},' + '{"fname": "Steve", "lname": "Jones", "company": "Amazon"},' + '{"fname": "Bill", "lname": "Peterson", "company": "HP"},' + '{"fname": "Peter", "lname": "Jacobs", "company": "Dell"}]'; var tmpData = JSON.parse (jData); var formattedJson = JSON.stringify (tmpData, null, '\ t');

Tại đây, biến formattedJson sẽ có chuỗi JSON được định dạng, được thụt lề bằng cách sử dụng tab. Để hiển thị JSON được định dạng trên giao diện người dùng, hãy sử dụng & lt; pre & gt; chỉ thẻ. Nếu bạn muốn hiển thị bên trong một div, trước tiên bạn cần phải nối & lt; pre & gt; trong phần tử div. Như:

 

$ ('# dvText'). append ($ ('& lt; pre & gt;'). text (formattedJson));

Bạn có thể xem bản trình diễn tại đây .

Chuyển đổi JSON thành CSV

Nếu bạn muốn chuyển đổi dữ liệu JSON sang CSV cho mục đích xuất, mã jQuery sau đây sẽ giúp bạn. Đoạn mã jQuery sau đây định nghĩa một hàm được gọi là ConvertToCSV nhận chuỗi JSON, chuyển đổi thành CSV và trả về nó. Vì không bắt buộc phải có dấu phẩy làm dấu phân cách cho CSV, dấu phân cách được chuyển từ bên ngoài, giúp thay đổi dấu phân cách trong tương lai mà không làm thay đổi chức năng thực tế. Trước tiên, hàm chuyển đổi dữ liệu JSON thành một mảng và sau đó lặp qua mảng để tạo một chuỗi được phân tách.

 

var jData = '[{"fname": "Mark", "lname": "Wood", "company": "Apple"},' + '{"fname": "Steve", "lname": "Jones", "company": "Amazon"},' + '{"fname": "Bill", "lname": "Peterson", "company": "HP"},' + '{"fname": "Peter", "lname": "Jacobs", "company": "Dell"}]'; var seperator = ','; var sCSV = ConvertToCSV (jData, seperator); function ConvertToCSV (jData, delimiter) { var arrJSON = typeof jData! = 'object'? JSON.parse (jData): jData; var sReturnVal = ''; for (var i = 0; i & lt; arrJSON.length; i ++) { var sLine = ''; for (var index trong arrJSON [i]) { if (sLine! = '') sLine + = delimiter; sLine + = arrJSON [i] [chỉ số]; } sReturnVal + = sLine + '\ r \ n'; } trả về sReturnVal; }

Bạn có thể xem bản trình diễn tại đây .
Hàm trên chỉ tạo một chuỗi được phân tách, nó không cho phép bạn lưu nó dưới dạng tệp .csv. Nếu bạn muốn xuất / tải xuống dữ liệu JSON thành tệp CSV có tiêu đề cột và tiêu đề báo cáo tùy chọn, mã jQuery sau cung cấp giải pháp cho điều tương tự. Hiện tại, hàm đã sửa đổi cần thêm 3 tham số: tiêu đề báo cáo, cờ hiển thị tiêu đề và tên tệp. Trong khi gọi hàm, vui lòng xem xét những điều sau:

  • Nếu bạn không muốn có tiêu đề báo cáo, hãy chuyển một chuỗi trống.
  • Trong trường hợp bạn không cần tiêu đề cột, hãy chuyển ShowHeader là false.
  • Chuyển tên tệp không có phần mở rộng .csv.
Xem Thêm  Mảng là gì và các kiểu của nó trong C? - mảng c là gì

Hàm thực hiện những việc sau:

  • Đầu tiên, hãy phân tích cú pháp dữ liệu JSON trong một đối tượng, nếu chưa có.
  • Nếu tiêu đề báo cáo không trống, hãy thêm tiêu đề vào biến.
  • Nếu ShowHeader là true, hãy lặp qua phần tử thứ 0 của mảng để lấy các cột tiêu đề rồi nối chúng vào biến.
  • Sau đó lặp lại mảng để lấy dữ liệu và tạo chuỗi phân tách bằng dấu phân cách.
  • Sau khi hoàn tất vòng lặp, hãy kiểm tra biến xem có lỗi nào không. Giá trị trống có nghĩa là dữ liệu JSON không chính xác. Trong trường hợp như vậy, nó sẽ ghi lại lỗi và thoát khỏi chức năng.
  • Nếu mọi thứ đều chính xác, thì hãy khởi tạo định dạng tệp. Trong trường hợp này, định dạng tệp là CSV.
  • Sau đó, nó tạo một thẻ liên kết tạm thời và gắn nó vào phần nội dung HTML với khả năng hiển thị ẩn. Gán các giá trị thuộc tính href và download và gọi hàm anchor click. Cuối cùng, hãy xóa nó một lần nữa khỏi cơ thể vì nó không còn cần thiết nữa.
 

hàm ConvertToCSV (jData, title, ShowHeader, fileName, delimiter) { var arrJSON = typeof jData! = 'object'? JSON.parse (jData): jData; var strCSV = ''; // Đặt tiêu đề trước. if (title.length & gt; 0) strCSV + = title + '\ r \ n \ n'; if (ShowHeader) { var headerRow = ""; for (var index trong arrJSON [0]) { if (headerRow! = '') headerRow + = delimiter; headerRow + = index; } strCSV + = headerRow + '\ r \ n'; } for (var i = 0; i & lt; arrJSON.length; i ++) { var sLine = ''; for (var index trong arrJSON [i]) { if (sLine! = '') sLine + = delimiter; sLine + = arrJSON [i] [chỉ số]; } strCSV + = sLine + '\ r \ n'; } if (strCSV == '') { console.log ('Lỗi khi chuyển đổi do dữ liệu không hợp lệ'); trở về; } var uri = 'data: text / csv; charset = utf-8,' + Escape (strCSV); var link = document.createElement ("a"); link.href = uri; link.style = "khả năng hiển thị: ẩn"; link.download = fileName + ".csv"; $ ('body'). append (liên kết); link.click (); $ ('body'). remove (link); }

Gọi hàm này trong bất kỳ sự kiện nào để chuyển đổi dữ liệu JSON thành tệp CSV có thể tải xuống như:

 

ConvertToCSV (jData, "Dữ liệu nhân viên", true, "EmployeeReport", seperator);

Bạn có thể xem mã đang hoạt động tại đây .

Xem Thêm  Xóa phần tử khỏi DANH SÁCH Python [clear, pop, remove, del] - cách xóa một phần tử khỏi danh sách trong python

Chuyển đổi JSON sang Bảng HTML

Đoạn mã jQuery sau sẽ tạo một phần tử bảng, điền dữ liệu bảng từ dữ liệu JSON và nối phần tử bảng vào phần nội dung HTML. Hàm sử dụng cú pháp jQuery cho các phần tử bảng khác nhau như hàng tiêu đề và hàng bảng. Bên trong vòng lặp mảng JSON, nó nối dữ liệu trong các đối tượng thích hợp và cuối cùng nó được thêm vào nội dung HTML.

 

hàm ConvertToTable (jData) { var arrJSON = typeof jData! = 'object'? JSON.parse (jData): jData; var $ table = $ (''); var $ headerTr = $ (''); for (var index trong arrJSON [0]) { $ headerTr.append ($ ('Â') .html (chỉ mục)); } $ table.append ($ headerTr); for (var i = 0; i & lt; arrJSON.length; i ++) { var $ tableTr = $ (''); for (var index trong arrJSON [i]) { $ tableTr.append ($ ('Â') .html (arrJSON [i] [index])); } $ table.append ($ tableTr); } $ ('body'). append ($ table); }

Ở đây, định dạng bảng cần được xử lý thông qua CSS. Bạn cũng có thể kết hợp điều tương tự trong mã này với các sửa đổi nhỏ.
Bạn có thể xem mã đang thực hiện tại đây .

Kết luận

Bài đăng này cung cấp các giải pháp đơn giản để xử lý JSON ở phía máy khách theo các cách khác nhau. Việc triển khai jQuery giúp định dạng JSON không có cấu trúc, chuyển đổi dữ liệu JSON thành chuỗi CSV hoặc tệp CSV có thể tải xuống với tùy chỉnh và hiển thị dữ liệu JSON trong bảng HTML. Các mã jQuery này không phụ thuộc vào bất kỳ plugin nào của bên thứ ba, giúp bạn sửa đổi chúng theo nhu cầu của mình mà không gặp bất kỳ rắc rối nào.

Xem Thêm  Tạo một tệp trống bằng Python - tạo một tệp python


Xem thêm những thông tin liên quan đến chủ đề tạo đối tượng json jquery

How to read external JSON file in Jquery AJAX

  • Tác giả: Jayant Tripathy
  • Ngày đăng: 2020-08-15
  • Đánh giá: 4 ⭐ ( 3123 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: This video demonstrate how to read data from external JSON file using JQuery AAJAX
    https://www.youtube.com/CoreSpider?sub_confirmation=1
    https://corespider.com

    https://corespider.com/how-to-read-external-json-file-in-jquery-ajax/

    Don’t forget to subscribe to “CoreSpider” !

    Website : https://corespider.com/
    https://www.coreprogramm.com/
    Facebook : https://www.facebook.com/CoreSpider/
    Twitter : https://twitter.com/CoreSpiderPro
    Instagram : https://www.instagram.com/CoreSpider
    Github : https://github.com/CoreSpider

JSON: Đối tượng JSON

  • Tác giả: v1study.com
  • Đánh giá: 5 ⭐ ( 2815 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một đối tượng JSON được bao quanh bởi cặp ngoặc xoắn. Các đối tượng JSON được viết trong các cặp key/value. Khóa phải là chuỗi và giá trị phải là kiểu

Hiểu rõ về JSON là gì? Cách lấy dữ liệu từ JSON

  • Tác giả: topdev.vn
  • Đánh giá: 5 ⭐ ( 8589 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JSON là viết tắt của JavaScript Object Notation, là một kiểu định dạng dữ liệu tuân theo một quy luật nhất định mà hầu hết các ngôn ngữ lập trình hiện nay đều có thể đọc được. JSON là một tiêu chuẩn mở để trao đổi dữ liệu trên web.

Bài 10: Đối tượng trong Javascript – Object – JSON

  • Tác giả: goclamweb.com
  • Đánh giá: 3 ⭐ ( 5216 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài học này, chúng ta sẽ tìm hiểu về đối tượng trong Javascript. Ngoài ra, chúng ta cũng tìm hiểu một chút về JSON – JavaScript Object Notation.

Tạo JSON động với từng giá trị đầu vào bằng jquery

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 6606 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Như thế này: function createJSON() { jsonObj = []; $(“input[class=email]”).each(function() { var id = $(this).attr(“title”); var…

Sử dụng JSON trong Javascript

  • Tác giả: longnv.name.vn
  • Đánh giá: 4 ⭐ ( 9941 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng JSON trong Javascript hướng dẫn bạn dùng JSON – một định dạng text có cấu trúc, rất thuận lợi để xử lý và trao đổi thông tin qua mạng.

Thao tác trên jQuery collection

  • Tác giả: ngocminhtran.com
  • Đánh giá: 4 ⭐ ( 4616 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: jQuery collection là gì? Trong các phần trước chúng ta luôn làm việc với tập jQuery, ví dụ chúng ta chọn phần tử p bằng lệnh $(‘p’) thì thực chất là chúng ta chọn một tập hợp các phần tử p (trừ khi chúng ta dùng một vài cách như phương thức hay bộ lọ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

By ads_php