Trong Js, có một số hàm giúp chuyển đổi dữ liệu JSON giúp ta sử dụng JSON trong Js tốt hơn. Đó là hàm JSON.parse()JSON.stringify() . Cách sử dụng phổ biến của JSON là trao đổi dữ liệu đến máy chủ web và ngược lại. Khi gửi dữ liệu đến máy chủ web, dữ liệu phải là một chuỗi. Phân tích cú pháp dữ liệu với JSON.parse() và dữ liệu trở thành một đối tượng Js. Chuyển đổi một đối tượng Js thành một chuỗi ta lại sử dụng JSON.stringify().

1. Biến chuỗi JSON thành đối tượng trong JavaScript

Trong Js, việc sử dụng object là thường xuyên. Vì vậy, ta phải phân tích cú pháp dữ liệu JSON nhận được từ máy chủ thành object của Js để làm việc. Hàm JSON.parse() sẽ giúp ta làm điều này một cách dễ dàng.

Phương thức này phân tích cú pháp một chuỗi JSON và xây dựng giá trị Js hoặc đối tượng được mô tả bởi chuỗi đó. Nhưng một điều hết sức quan trọng là chuỗi đó phải là một JSON hợp lệ. Nếu chuỗi đã cho không phải là JSON hợp lệ sẽ gặp lỗi cú pháp.

Ví dụ: ta nhận được văn bản từ một máy chủ web và sử dụng hàm JSON.parse() để chuyển đổi văn bản thành một đối tượng Js:

<!DOCTYPE html>
<html>
<body>

<h2>Tạo một đối tượng từ chuỗi JSON</h2>

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

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

</body>
</html>

Ta 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

var  str = '{ "name" : "JS" , "age" : 17 }' ;

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

console.log(str);              //{ "name" : "Thành" , "age" : 19 }

2. Xử lý mảng dưới dạng JSON

Khi sử dụng JSON.parse() trên một mảng JSON , phương thức sẽ trả về một mảng Js, thay vì một đối tượng Js.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h2>Phân tích cú pháp một Mảng JSON.</h2>
<p>Dữ liệu được viết dưới dạng một mảng JSON sẽ được phân tích cú pháp thành một mảng JavaScript.</p>
<p id="demo"></p>

<script>
const text = '[ "Ford", "BMW", "Audi", "Vinfast" ]';
const myArr = JSON.parse(text);
document.getElementById("demo").innerHTML = myArr[0];
</script>

</body>
</html>

3. Xử lý một số trường hợp ngoại lệ trong JSON

3.1. Xử lý ngày tháng

Đối tượng Date không được phép sử dụng trong JSON . Nhưng nếu trường hợp ta bắt buộc phải sử dụng, hãy viết nó dưới dạng một chuỗi. Rồi sau đó ta có thể chuyển đổi nó lại thành một đối tượng Date

Ví dụ: Chuyển đổi một chuỗi thành một ngày tháng

<!DOCTYPE html>
<html>
<body>

<h2>Chuyển đổi một chuỗi thành một đối tượng ngày tháng.</h2>
<p id="demo"></p>

<script>
const text = '{"name":"Thành", "birth":"2002-10-08", "city":"Hà Nội"}';
const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

Hoặc ta có thể sử dụng tham số thứ 2 của hàm JSON.parse để kiểm tra mỗi thuộc tính trước khi trả về giá trị.

<!DOCTYPE html>
<html>
<body>

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

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

<script>
const text = '{"name":"Thành", "birth":"2002-10-08", "city":"Hà Nội"}';
const obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

3.2. Xử lý hàm

Các hàm cũng không được phép sử dụng trong JSON. Tuy nhiên nếu cần sử dụng nó ta cũng có thể viết một hàm đó dưới dạng một chuỗi. Sau này ta có thể chuyển đổi nó lại thành một hàm

<!DOCTYPE html>
<html>
<body>

<h2>Chuyển đổi một chuỗi thành một hàm.</h2>
<p id="demo"></p>

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

</body>
</html>

Lưu ý

Ta nên tránh sử dụng các hàm trong JSON. Vì các hàm sẽ mất phạm vi của chúng và ta sẽ phải sử dụng eval() để chuyển đổi chúng trở lại thành các hàm.

4. Phân tích cú pháp JSON lồng nhau trong JavaScript

Các đối tượng và mảng JSON cũng có thể được lồng vào nhau. Một đối tượng JSON có thể tùy ý chứa các đối tượng JSON khác như: mảng, mảng lồng nhau, mảng đối tượng JSON,… Để xử lý JSON lồng nhau như vậy cũng sẽ phức tạp hơn một chút.

Ví dụ: phân tích cú pháp một đối tượng JSON lồng nhau và trích xuất tất cả các giá trị bằng Js

// Lưu JSON trong biến JS
var json = `{
    "book": {
        "name": "Lập Trình Từ Đầu",
        "author": "JavaScript",
        "year": 2022,
        "coAuthors": ["Thành Nguyễn", "Nam Chu", "Sơn Phùng"],
        "genre": "laptrinhtudau.com",
        "price": {
            "paperback": "69000", "hardcover": "99000", "pdf": "25000"
        }
    }
}`;

// Chuyển từ đối tượng JSON thành đối tượng JS
var obj = JSON.parse(json);

Vì đối tượng nhận được chứa mảng và đối tượng con nên ta kiểm tra, nếu kiểu của nó là Object thì lặp hồi quy

// Tạo hàm hồi quy để in giá trị lồng bên trong 
function printValues(obj) {
    for (var k in obj) {
        if (obj[k] instanceof Object) {
            printValues(obj[k]);
        } else {
            console.log(obj[k]);
        };
    }
};

// In ra tất cả các giá trị
printValues(obj);

Còn nếu ta đã biết rõ cấu trúc của chuỗi JSON thì có thể truy cập từng giá trị như sau

// In ra từng giá trị
console.log(obj["book"]["author"]); 
console.log(obj["book"]["coAuthors"][0]); 
console.log(obj["book"]["price"]["hardcover"]);