Hướng dẫn dùng jsonfile JavaScript

Nội dung chính của chủ đề:

• Khái niệm về JSON.
• JSON.parse()
• JSON.stringify()

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(eXtensible Markup Language) 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" : "Code Learn","Age" :2}

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

{ 
  "Name" : "Code Learn", 
  "Age" : 2 
}

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" : "Code Learn" , "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
}

4. Cách làm việc với JSON

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

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 }

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)

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}

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"}

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"}

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"}

Lời kết

Trên đây là những kiến thức cơ bản để làm việc với kiểu dữ liệu JSON trong 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 !

Nguồn tham khảo: w3schools