Xử Lý Dữ Liệu JSON Đơn Giản Với 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ệ tiên tiến 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 yếu tạo ra một loại dữ liệu mới có tên gọi là JSON nhằm mục đích xử lý yếu tố trao đổi dữ liệu giữa các nền tảng và làm nhẹ dung tích tàng 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 diễn và diễn đạ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ự }.

Bạn đang đọc: Xử Lý Dữ Liệu JSON Đơn Giản Với Javascript

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 hoàn toàn 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ị.

Xem thêm: Có 3 giai đoạn phát triển trí não đỉnh cao của 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 hoàn toàn có thể dùng phương pháp JSON.parse ( ) để tạo ra object để thao tác. Vậy còn ngược lại ? Khi ta cần tạo chuỗi JSON từ object thì làm thế nào ?

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().

Xem thêm: Hướng dẫn cứu dữ liệu đã xóa trong USB từ A – Z

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 kỹ năng và kiến thức cơ bản để thao tá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ể quan điểm góp phần gì thì mong các bạn để lại comment ở dưới để tất cả chúng ta cùng bàn luận. Cảm ơn các bạn đã đọc bài viết !

Nguồn tìm hiểu thêm : w3schools

Source: https://thomaygiat.com
Category : Kỹ Thuật Số