1. Mô hình xử lý JSON

JSON là một mô hình dạng dữ liệu mở đang được sử dụng rất phổ biến. Việc xử lý dữ liệu JSON rất quan trọng trong lập trình hiện nay. Mô hình chung của việc sử lý dữ liệu JSON sẽ như sau:

Máy khách kết nối tới máy chủ và gửi yêu cầu tài nguyên
Máy chủ xử lý và trả tài nguyên về dưới dạng JSON
Máy khách sẽ phân tích chuỗi JSON, thường sẽ trả về dạng object hoặc array. Xử lý dữ liệu và hiển thị cho người dùng.

2. Cách làm việc với dữ liệu JSON

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

Để chuyển hóa một chuỗi JSON sang một đối tượng trong Js, chúng ta dùng hàm dựng sẵn JSON.parse(). Phương thức này sẽ tạo ra một đối tượng, với tên các thuộc tính là tham số key , và giá trị của thuộc tính là value trong chuỗi JSON. Nếu trong chuỗi JSON có chứa mảng, đối tượng cũng sẽ chứa mảng.

Ví dụ:

var str='{
          "company":"laptrinhtudau",
          "CEO":"Thành Nguyễn",
          "employees":[{"name": "Nam","age": 19},{"name": "Sơn","age": 19}]
          }';

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) ;           // laptrinhtudau
console.log(obj.employees[0].name) ; // Nam
console.log(obj.employees[1].name) ; // Sơn

Hoặc ta có thể thay đổi giá trị thuộc tính JSON bằng cách truy cập tên thuộc tính

var  str = '{ "name" : "Thành Nguyễn" , "age" :19 }' ;

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

console.log(str);  //{ "name" : "Nam Chu" , "age" : 20 }

JSON.parse() cũng 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ị

var text = '{ "name":"Thành", "birth":"2002-10-08", "city":"Hà Nội"}';
var obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});
console.log(obj.birth);

2.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 Js thành một văn bản có định dạng JSON

Ví dụ:

var obj = {name : "Thành Nguyễn", age : 19};
 
var text = JSON.stringify(obj);
 
console.log(text); // {"name":"Thành Nguyễn","age":19}

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.

var obj = { name: "Thành Nguyễn", today: new Date(), city : "Hà Nội" };
var myJSON = JSON.stringify(obj);
console.log(myJSON);

Trong JSON, function cũng 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 Js(xóa luôn cả tên thuộc tính)

var obj = { name: "Thành Nguyễn", age: function () {return 19;}, city: "Hà Nội"};
var myJSON = JSON.stringify(obj); 
console.log(myJSON );

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

var obj = { name: "Thành Nguyễn", age: function () {return 19;}, city: "Hà Nội" };
obj.age = obj.age.toString();
var myJSON = JSON.stringify(obj);
console.log(myJSON)

3. Gửi và nhận dữ liệu JSON bằng phương thức POST

Nếu ta có dữ liệu được lưu trữ trong một đối tượng Js, ta có thể chuyển đổi đối tượng đó thành JSON và gửi nó đến máy chủ.

<!DOCTYPE html>
<html>
<body>

<h2>Chuyển đổi một đối tượng JavaScript thành một chuỗi JSON và gửi nó đến máy chủ.</h2>

<script>
const myObj = { name: "Thành", age: 19, city: "Hà Nội" };
const myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
</script>

</body>
</html>

Mình đã nói về đối tượng location rồi nên sẽ không nhắc lại nữa. Nếu chưa xem thì các bạn có thể tham khảo tại đây

Sử dụng phương thức Post để gửi và nhận dữ liệu

//Gửi và nhận dữ liệu ở định dạng JSON bằng phương thức POST
var xhr = new XMLHttpRequest();
var url = "url";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var json = JSON.parse(xhr.responseText);
        console.log(json.email + ", " + json.password);
    }
};
var data = JSON.stringify({"email": "laptrinhtudau@gmail.com", "password": "101010"});
xhr.send(data);

4. Gửi và nhận dữ liệu JSON bằng phương thức Get

Nếu ta nhận được dữ liệu ở định dạng JSON, ta có thể dễ dàng chuyển đổi nó thành một đối tượng Js:

<!DOCTYPE html>
<html>
<body>

<h2>Chuyển đổi một chuỗi JSON thành một đối tượng JavaScript.</h2>

<p id="demo"></p>

<script>
const myJSON = '{"name":"Thành", "age":19, "city":"Hà Nội"}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>

</body>
</html>

Sử dụng phương thức Get để gửi và nhận dữ liệu

// Gửi dữ liệu nhận ở định dạng JSON bằng phương thức GET
//      
var xhr = new XMLHttpRequest();
var url = "url?data=" + encodeURIComponent(JSON.stringify({"email": "laptrinhtudau@gmail.com", "password": "101010"}));
xhr.open("GET", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var json = JSON.parse(xhr.responseText);
        console.log(json.email + ", " + json.password);
    }
};
xhr.send();

Chú ý

Ta có thể yêu cầu JSON từ máy chủ bằng cách sử dụng AJAX . Miễn là phản hồi từ máy chủ được viết ở định dạng JSON, ta có thể phân tích cú pháp chuỗi thành một đối tượng Js. Sử dụng XMLHttpRequest để lấy dữ liệu từ máy chủ

<!DOCTYPE html>
<html>
<body>

<h2>Tìm nạp tệp JSON bằng XMLHttpRequest</h2>
<p id="demo"></p>

<script>
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj.name;
}
xmlhttp.open("GET", "json_demo.txt");
xmlhttp.send();
</script>

</body>
</html>

Xử lý JSON tới Server với JavaScript