GALAXY TECH
Chuyên gia Công nghệ
Thứ sáu, 09/12/2016 | 00:00 GMT+7

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

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”.

Để tìm hiểu thêm về JSON nói chung, hãy đọc hướng dẫn " Giới thiệu về JSON ".

Để bắt đầu suy nghĩ về nơi bạn có thể sử dụng JSON trong các chương trình JavaScript của bạn , một số trường hợp sử dụng chung của JSON bao gồm:

  • Lưu trữ dữ liệu
  • Tạo cấu trúc dữ liệu từ đầu vào của user
  • Truyền dữ liệu từ server sang client , client sang server và server sang server
  • Cấu hình và xác minh dữ liệu

Hướng dẫn này sẽ cung cấp cho bạn phần giới thiệu về cách làm việc với JSON trong JavaScript. Để tận dụng tối đa phần giới thiệu này, bạn nên làm quen với ngôn ngữ lập trình JavaScript.

Định dạng JSON

Định dạng của JSON có nguồn root từ cú pháp đối tượng JavaScript, nhưng nó hoàn toàn dựa trên văn bản. Nó là một định dạng dữ liệu key-value thường được hiển thị trong dấu ngoặc nhọn.

Khi làm việc với JSON, bạn có thể sẽ thấy các đối tượng JSON trong file .json , nhưng chúng cũng có thể tồn tại dưới dạng một đối tượng hoặc chuỗi JSON trong ngữ cảnh của chương trình. Đọc thêm về cú pháp và cấu trúc tại đây .

Khi bạn đang làm việc với file .json , nó sẽ giống như sau:

sammy.json
{    "first_name"  :  "Sammy",    "last_name"   :  "Shark",    "online"      :  true  }

Thay vào đó, nếu bạn có một đối tượng JSON trong file .js hoặc .html , bạn có thể sẽ thấy nó được đặt thành một biến:

var sammy = {    "first_name"  :  "Sammy",    "last_name"   :  "Shark",    "online"      :  true  }

Ngoài ra, bạn có thể thấy JSON là một chuỗi thay vì một đối tượng trong ngữ cảnh của file chương trình JavaScript hoặc tập lệnh. Trong trường hợp này, bạn cũng có thể thấy tất cả trên một dòng:

var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

Việc chuyển đổi các đối tượng JSON thành chuỗi có thể đặc biệt hữu ích để vận chuyển dữ liệu một cách nhanh chóng.

Ta đã xem xét định dạng chung của JSON và cách bạn có thể thấy nó dưới dạng file .json hoặc bên trong JavaScript dưới dạng một đối tượng hoặc một chuỗi.

So sánh với đối tượng JavaScript

Cần lưu ý JSON được phát triển để sử dụng bởi bất kỳ ngôn ngữ lập trình nào, trong khi các đối tượng JavaScript chỉ có thể được làm việc trực tiếp thông qua ngôn ngữ lập trình JavaScript.

Về mặt cú pháp, các đối tượng JavaScript tương tự như JSON, nhưng khóa trong các đối tượng JavaScript không phải là chuỗi trong dấu ngoặc kép. Ngoài ra, các đối tượng JavaScript ít bị giới hạn hơn về loại được truyền cho giá trị, vì vậy chúng có thể sử dụng các hàm làm giá trị.

Hãy xem ví dụ về một đối tượng JavaScript của user trang web Sammy Shark hiện đang trực tuyến.

var user = {     first_name: "Sammy",     last_name : "Shark",     online    : true,     full_name : function() {        return this.first_name + " " + this.last_name;     } };

Điều này sẽ trông rất quen thuộc với bạn dưới dạng một đối tượng JSON, nhưng không có dấu ngoặc kép nào xung quanh bất kỳ khóa nào ( first_name , last_name , online hoặc full_name ) và có một giá trị hàm ở dòng cuối cùng.

Nếu ta muốn truy cập dữ liệu trong đối tượng JavaScript ở trên, ta có thể sử dụng ký hiệu dấu chấm để gọi user.first_name; và lấy một chuỗi, nhưng nếu ta muốn truy cập vào tên đầy đủ, ta cần phải làm như vậy bằng cách gọi user.full_name(); bởi vì nó là một chức năng.

Các đối tượng JavaScript chỉ có thể tồn tại trong ngôn ngữ JavaScript, vì vậy khi bạn đang làm việc với dữ liệu cần được truy cập bằng nhiều ngôn ngữ khác nhau, tốt nhất là chọn JSON.

Truy cập dữ liệu JSON

Dữ liệu JSON thường được truy cập trong Javascript thông qua ký hiệu dấu chấm. Để hiểu cách hoạt động của điều này, hãy xem xét đối tượng JSON sammy :

var sammy = {    "first_name"  :  "Sammy",    "last_name"   :  "Shark",    "online"      :  true  }

Để truy cập bất kỳ giá trị nào, ta sẽ sử dụng ký hiệu dấu chấm trông giống như sau:

sammy.first_name sammy.last_name sammy.online

Biến sammy đầu tiên, tiếp theo là dấu chấm, tiếp theo là khóa được truy cập.

Để tạo cảnh báo JavaScript hiển thị cho ta giá trị được liên kết với khóa first_name trong cửa sổ bật lên, ta có thể thực hiện bằng cách gọi hàm alert() JavaScript:

alert(sammy.first_name); 
Output
Sammy

Ở đây, ta đã gọi thành công giá trị được liên kết với khóa first_name từ đối tượng sammy JSON.

Ta cũng có thể sử dụng cú pháp dấu ngoặc vuông để truy cập dữ liệu từ JSON. Để làm điều đó, ta sẽ giữ khóa trong dấu ngoặc kép trong dấu ngoặc vuông. Đối với biến sammy của ta ở trên, việc sử dụng cú pháp dấu ngoặc vuông trong hàm alert() trông giống như sau:

alert(sammy["online"]); 
Output
true

Khi bạn đang làm việc với các phần tử mảng lồng nhau , bạn nên gọi số của mục trong mảng của bạn . Hãy xem xét JSON bên dưới:

var user_profile = {    "username" : "SammyShark",   "social_media" : [     {       "description" : "twitter",       "link" : "https://twitter.com/digitalocean"     },     {       "description" : "facebook",       "link" : "https://www.facebook.com/DigitalOceanCloudHosting"     },     {       "description" : "github",       "link" : "https://github.com/digitalocean"     }   ] }

Để truy cập chuỗi facebook , ta có thể gọi mục đó trong mảng trong ngữ cảnh của ký hiệu dấu chấm:

alert(user_profile.social_media[1].description); 
Output
facebook

Lưu ý đối với mỗi phần tử lồng nhau, ta sẽ sử dụng một dấu chấm bổ sung.

Sử dụng ký hiệu dấu chấm hoặc cú pháp dấu ngoặc vuông cho phép ta truy cập dữ liệu có trong định dạng JSON.

Các chức năng để làm việc với JSON

Phần này sẽ xem xét hai phương pháp để xâu chuỗi và phân tích cú pháp JSON. Có thể chuyển đổi JSON từ đối tượng sang chuỗi và ngược lại rất hữu ích cho việc chuyển và lưu trữ dữ liệu.

JSON.stringify ()

Hàm JSON.stringify() chuyển đổi một đối tượng thành một chuỗi JSON.

Chuỗi rất hữu ích để vận chuyển dữ liệu từ client đến server thông qua việc lưu trữ hoặc chuyển thông tin một cách nhẹ nhàng. Ví dụ: bạn có thể thu thập cài đặt của user ở phía client và sau đó gửi chúng đến server . Sau đó, bạn có thể đọc thông tin bằng phương thức JSON.parse() và làm việc với dữ liệu khi cần.

Ta sẽ xem xét một đối tượng JSON mà ta gán cho biến obj và sau đó ta sẽ chuyển đổi nó bằng cách sử dụng JSON.stringify() bằng cách chuyển obj vào hàm. Ta có thể gán chuỗi này cho biến s :

var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}  var s = JSON.stringify(obj)

Bây giờ, nếu ta làm việc với s , ta sẽ cung cấp JSON cho ta dưới dạng một chuỗi chứ không phải một đối tượng.

'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'

Hàm JSON.stringify() cho phép ta chuyển đổi các đối tượng thành chuỗi. Để làm ngược lại, ta sẽ xem xét hàm JSON.parse() .

JSON.parse ()

Các chuỗi rất hữu ích để vận chuyển nhưng bạn cần có thể chuyển đổi chúng trở lại đối tượng JSON trên client và / hoặc phía server . Mặc dù bạn có thể chuyển đổi văn bản thành một đối tượng bằng hàm eval() , nhưng nó không an toàn lắm, vì vậy ta sẽ sử dụng hàm JSON.parse() để thay thế.

Để chuyển đổi ví dụ trong phần JSON.stringify () ở trên, ta sẽ chuyển chuỗi s vào hàm và gán nó cho một biến mới:

var o = JSON.parse(s)

Sau đó, ta sẽ có đối tượng o để làm việc, đối tượng này sẽ giống với đối tượng obj .

Để xem xét sâu hơn, hãy xem xét một ví dụ về JSON.parse() trong ngữ cảnh của file HTML:

<!DOCTYPE html> <html> <body>  <p id="user"></p>  <script> var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';  var obj = JSON.parse(s);  document.getElementById("user").innerHTML = "Name: " + obj.first_name + " " + obj.last_name + "<br>" + "Location: " + obj.location; </script>  </body> </html> 
Output
Name: Sammy Shark Location: Ocean

Trong ngữ cảnh của file HTML, ta có thể thấy cách chuỗi JSON s được chuyển đổi thành một đối tượng có thể truy xuất được trong lần hiển thị cuối cùng của trang bằng cách truy cập vào JSON thông qua ký hiệu dấu chấm.

JSON.parse() là một hàm an toàn để phân tích cú pháp các chuỗi JSON và chuyển đổi chúng thành các đối tượng.

Kết luận

JSON là một định dạng tự nhiên để sử dụng trong JavaScript và có nhiều triển khai có sẵn để sử dụng trong nhiều ngôn ngữ lập trình phổ biến. Nếu bạn muốn sử dụng định dạng bằng một ngôn ngữ lập trình khác, bạn có thể xem hỗ trợ ngôn ngữ đầy đủ trên trang web “ Giới thiệu JSON ”.

Bởi vì nó nhẹ và được chuyển dễ dàng giữa các ngôn ngữ lập trình và hệ thống, JSON đã được hỗ trợ nhiều hơn trong các API, bao gồm cả API Twitter .

Có thể bạn sẽ không tạo file .json của riêng mình mà mua chúng từ các nguồn khác. Bạn có thể xem các tài nguyên này để tìm hiểu về cách chuyển đổi các cấu trúc dữ liệu khác sang JSON.

Tags:

Các tin liên quan

Cấu trúc đối tượng và mảng trong JavaScript với ES6
2016-12-09
Một trang đơn giản mờ dần với JavaScript
2016-11-29
Truy cập các phần tử trong JavaScript với querySelector và querySelectorAll
2016-11-29
Let và Const trong JavaScript với ES6 / ES2015
2016-11-10
Chức năng của Trình tạo trong JavaScript với ES6 / ES2015
2016-11-07
Tham số phần còn lại trong JavaScript với ES6 / ES2015
2016-11-02
Hứa hẹn trong JavaScript với ES6 / ES2015
2016-10-31
Chữ mẫu trong JavaScript (ES6 / ES2015)
2016-10-11
console.table () trong JavaScript
2016-09-28
console.time () & console.timeEnd () trong JavaScript
2016-09-28