Truyền dữ liệu JSON với JavaScript

Trong bài viết này, chúng ta sẽ tìm hiểu về cách truyền dữ liệu JSON với JavaScript.

1. JSON là gì?

Nhu cầu trao đổi dữ liệu giữa các nền tảng và công nghệ khác nhau ngày càng lớn. Lúc này, XML trở nên cồng kềnh và làm nặng dữ liệu bởi cấu trúc thẻ của nó. Điều đó dẫn tới nhu cầu tạo ra một loại dữ liệu mới có tên gọi là JSON nhằm giải quyết vấn đề trao đổi dữ liệu giữa các nền tảng và làm nhẹ dung lượng lưu trữ của dữ liệu trao đổi.

JSON là viết tắt của JavaScript Object Notation, là một 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.

2. Chuỗi JSON đơn giản

Chuỗi JSON được bắt đầu bằng ký tự { và kết thúc bởi ký tự }.

Từng cặp thuộc tính – giá trị (key-value) được xem là 1 dữ liệu và được trình bày theo nguyên tắc:"tên_thuộc_tính":"giá_trị_thuộc_tính" Hoặc "tên_thuộc_tính":giá_trị_số_của_thuộc_tính

Nhiều dữ liệu có thể có bên trong JSON và cách nhau bởi dấu phẩy “,”

Các key của JSON bạn nên đặt chữ cái không dấu hoặc số, dấu _ và không có khoảng trắng., ký tự đầu tiên không nên đặt là số. Điều này rất giống với nguyên tắc đặt tên biến.

Ví dụ:

{"Name" : "Hoc JavaScript","Age" :2}
Code language: JSON / JSON with Comments (json)

Hoặc có thể viết lại như sau :

{ 
  "Name" : "Hoc JavaScript", 
  "Age" : 2 
}
Code language: JSON / JSON with Comments (json)

3. Những giá trị mà JSON có thể có

Tại một dữ liệu, giá trị của thuộc tính có thể nhận vào 1 trong các loại dữ liệu sau đây: một giá trị chuỗi, một giá trị số, một mảng (giá trị một phần tử của mảng cũng có nguyên tắc tương tự), hay một JSON khác.

Ví dụ:

{
   "data" : 
   [
    125,
    { "name" : "Hoc JavaScript" , "age" : 2 },
    { "name" : "Javascript" , "age" : 25 },
     "string any"
    ] ,// giá trị là một mảng
    "count" : 3000,//giá trị là một số
    "more_info" : { "status" : 200 , "message" : "I'm fine OK" }//giá trị là một json
}
Code language: JSON / JSON with Comments (json)

4. Truyền dữ liệu JSON

Dưới đây là một số cách để truyền dữ liệu JSON với JavaScript.

4.1 Dùng phương thức JSON.parse() để tạo ra Object JavaScript

Ví dụ:

var str='{
          "company":"facebook",
          "CEO":"Mark Zuckerberg",
          "employees":[{"name": "John","age": 25},{"name": "Anna","age": 29}]
          }';

var obj = JSON.parse(str); // đây là object javascript được tạo từ chuỗi JSON

/* truy cập vào thuộc tính JSON bằng tên thuộc tính */
console.log(obj.company) ;           // facebook
console.log(obj.employees[0].name) ; // John
console.log(obj.employees[1].name) ; // Anna
Code language: PHP (php)

Có thể thay đổi giá trị thuộc tính của JSON bằng cách truy cập tên thuộc tính.

Ví dụ:

var  str = '{ "name" : "Code learn" , "age" : 2 }' ;

var obj = JSON.parse(str) ;
	
obj.name = “Google Chrome” ;	// truy cập vào thuộc tính JSON bằng tên thuộc tính và đổi giá trị
obj.age = 12;

console.log(str);              //{ "name" : "Google Chrome" , "age" : 12 }Code language: JavaScript (javascript)

JSON.parse () có thể nhận thêm tham số thứ 2 để kiểm tra mỗi thuộc tính trước khi trả về giá trị.

Ví dụ:

var text = '{ "name":"John", "birth":"1996-05-15", "city":"New York"}';
var obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});
console.log(obj.birth); // Tue May 14 1996 17:00:00 GMT-0700 (Giờ mùa hè Thái Bình Dương)Code language: JavaScript (javascript)

4.2 Dùng phương thức JSON.stringify() để tạo chuỗi JSON từ Object JavaScript

Khi nhận được chuỗi JSON ta có thể dùng phương thức JSON.parse() để tạo ra object để làm việc. Vậy còn ngược lại? Khi ta cần tạo chuỗi JSON từ object thì làm sao? 

Bằng cách sử dụng phương thức JSON.stringify() giúp bạn chuyển đổi một đối tượng Javascript thành một văn bản có định dạng JSON

Ví dụ:

var obj = {name : "John", age : 29};
 
var text = JSON.stringify(obj);
 
console.log(text); // {"name":"John","age":29}Code language: JavaScript (javascript)

Stringify Dates

Trong JSON, đối tượng date là không được phép do đó JSON.stringify() sẽ chuyển đổi ngày bất kì thành chuỗi.

Ví dụ:

var obj = { name: "John", today: new Date(), city : "New York" };
var myJSON = JSON.stringify(obj);
console.log(myJSON); //{"name":"John","today":"2020-05-15T22:30:59.953Z","city":"New York"}Code language: JavaScript (javascript)

Stringify Functions

Trong JSON, function là không được phép làm giá trị của object do đó JSON.stringify() sẽ xóa bất kì hàm nào khỏi đối tượng javascript (xóa luôn cả tên thuộc tính).

Ví dụ:

var obj = { name: "John", age: function () {return 30;}, city: "New York"};
var myJSON = JSON.stringify(obj); 
console.log(myJSON ); // {"name":"John","city":"New York"}Code language: JavaScript (javascript)

Nếu muốn giữ lại function làm giá trị thì phải chuyển function thành chuỗi trước khi chạy phương thức JSON.stringify().

Ví dụ:

var obj = { name: "John", age: function () {return 30;}, city: "New York" };
obj.age = obj.age.toString();
var myJSON = JSON.stringify(obj);
console.log(myJSON) // {"name":"John","age":"function () {return 30;}","city":"New York"}Code language: JavaScript (javascript)

Lời kết

Trên đây là những kiến thức cơ bản về truyền dữ liệu JSON với JavaScript, nếu các bạn thấy hay thì ủng hộ giúp mình, nếu có bất kì ý kiến đóng góp gì thì mong các bạn để lại comment ở dưới để chúng ta cùng thảo luận. Cảm ơn các bạn đã đọc bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.