Trong một thời gian dài, XML là định dạng dữ liệu được ưa chuộng dùng cho việc giao tiếp giữa máy khách và máy chủ. Sau đó vào đầu năm 2000, JSON được giới thiệu như một định dạng dữ liệu thay thế để trao đổi thông tin.

Trong bài viết này, VietnamWorks inTECH giới thiệu chi tiết về JSON cũng như làm rõ một số quan niệm mà nhiều người vẫn hay lầm tưởng. 

1. JSON là gì?

JSON ( JavaScript Object Notation) là một text-based định dạng trao đổi dữ liệu. Nó là tập hợp các cặp key-value trong đó key phải là loại chuỗi và value có thể thuộc bất kỳ loại nào sau đây:

• Number

• String

• Boolean

• Array

• Object

• null

Một số quy tắc quan trọng cần lưu ý:

• Ở định dạng dữ liệu JSON, các key phải được đặt trong dấu ngoặc kép.

• Key và value phải được phân tách bằng dấu hai chấm (:).

• Có thể có nhiều cặp key-value. Hai cặp key-value phải được phân tách bằng ký hiệu dấu phẩy (,).

• Không cho phép comment (// hoặc /* */) trong dữ liệu JSON. 

Đây là ví dụ về dữ liệu JSON đơn giản:

{

    "name": "VietnamWorks inTECH",

    "age": 5,

    "city": "Ho Chi Minh"

}

Dữ liệu JSON hợp lệ có thể ở hai định dạng khác nhau:

• Một tập hợp các cặp key-value được bao bọc bởi một cặp dấu ngoặc nhọn {...}. Chẳng hạn như ví dụ ở trên.

• Tập hợp danh sách có thứ tự các cặp key-value được phân tách bằng dấu phẩy (,) và được bao bọc bởi một cặp dấu ngoặc vuông [...]. Ví dụ:

[

{

        "name": "Ann T",

        "age": 22,

        "city": "Ha Noi"

},

    {

        "name": "Thao D",

        "age": 30,

        "city": "Da Nang"

},

    {

        "name": "Nhan P",

        "age": 2,

        "city": "Binh Duong"

}

]

Giả sử bạn đang là lập trình viên JavaScript. Bạn có thể cảm thấy định dạng JSON và các đối tượng JavaScript (và mảng đối tượng) rất giống nhau. Tuy nhiên, sự thật không phải như vậy.

Mối quan hệ duy nhất giữa định dạng dữ liệu JSON và các đối tượng JavaScript là cấu trúc định dạng JSON được lấy từ cú pháp đối tượng Javascript.

JSON là một định dạng độc lập với ngôn ngữ lập trình. Chúng ta có thể sử dụng định dạng dữ liệu JSON trong Python, Java, PHP và nhiều ngôn ngữ lập trình khác.

Ví dụ về định dạng dữ liệu JSON

Bạn có thể lưu dữ liệu JSON vào một tệp có phần mở rộng là .json. Hãy tạo một tệp employee.json có các thuộc tính (được biểu thị bằng key-value) của một nhân viên.

{

"name": "Hung Dung",

"id": "E00245",

"role": ["Dev", "DBA"],

"age": 23,

"doj": "11-12-2022",

"married": false,

"address": {

"street": "132, Hai Ba Trung St.",

"city": "Ho Chi Minh",

"country": "Vietnam"

},

"referred-by": "E0012"

}

Dữ liệu JSON ở trên hiển thị các thuộc tính của một nhân viên. Các thuộc tính là:

• name: tên nhân viên. Value thuộc String. Vì vậy, nó được kèm theo với dấu ngoặc kép.

• id: mã định danh duy nhất của một nhân viên, đây lại là một String.

• role: vai trò của nhân viên trong tổ chức. Một nhân viên có thể đảm nhận nhiều vai trò, vì vậy Array là lựa chọn phù hợp.

• age: tuổi hiện tại của người lao động, đây là Number.

• doj: ngày nhân viên gia nhập công ty. Vì là ngày nên nên phải được đặt trong dấu ngoặc kép và được xử lý như một tệp String.

• married: nhân viên đã kết hôn chưa? True hay false? Vì vậy, giá trị là Boolean.

• address: địa chỉ của nhân viên. Một địa chỉ có thể có nhiều phần như đường phố, thành phố, quốc gia, mã zip, v.v. Vì vậy, chúng ta có thể coi giá trị địa chỉ là một Object (với các cặp key-value).

• referred-by: id của nhân viên đã giới thiệu nhân viên này vào tổ chức. Nếu nhân viên này tham gia bằng cách giới thiệu, thuộc tính này sẽ có giá trị. Nếu không, nó sẽ có giá trị là null.

Bây giờ hãy tạo một collection nhân viên dưới dạng dữ liệu JSON. Để làm điều đó, chúng ta cần lưu giữ nhiều hồ sơ nhân viên bên trong dấu ngoặc vuông [...].

[

{

        "name": "Hung Dung",

        "id": "E00245",

        "role": ["Dev", "DBA"],

        "age": 23,

        "doj": "11-12-2022",

        "married": false,

        "address": {

            "street": "132, Hai Ba Trung St.",

            "city": "Ho Chi Minh",

            "country": "Vietnam"

            },

        "referred-by": "E0012"

},

    {

        "name": "Manh Cuong",

        "id": "E01245",

        "role": ["HR"],

        "age": 43,

        "doj": "10-06-2018",

        "married": true,

        "address": {

            "street": "345, Ham Nghi St.",

            "city": "Ho Chi Minh",

            "country": “Vietnam"

            },

        "referred-by": null

}

]

Bạn có để ý thuộc tính referred-by của nhân viên thứ hai, Manh Cuong không? Giá trị là null, điều đó có nghĩa là anh ta không được bất kỳ nhân viên nào giới thiệu.

2. Cách sử dụng dữ liệu JSON làm giá trị chuỗi

Chúng ta đã thấy cách định dạng dữ liệu JSON bên trong tệp JSON. Ngoài ra, chúng ta có thể sử dụng dữ liệu JSON làm giá trị chuỗi và gán nó cho một biến. Vì JSON là định dạng dựa trên văn bản nên có thể xử lý dưới dạng chuỗi trong hầu hết các ngôn ngữ lập trình.

Hãy lấy một ví dụ để hiểu cách chúng ta có thể làm điều đó trong JavaScript. Bạn có thể đính kèm toàn bộ dữ liệu JSON dưới dạng một chuỗi trong một trích dẫn duy nhất '...'.

const user = '{"name": "VietnamWorks inTECH", "age": 5, "city": "Ho Chi Minh"}';

Nếu muốn giữ nguyên định dạng JSON, bạn có thể tạo dữ liệu JSON với sự hỗ trợ của template literals.

const user = `{

    "name": "Alex C",

    "age": 2,

    "city": "Houston"

}`;

Nó cũng hữu ích khi bạn muốn xây dựng dữ liệu JSON bằng các giá trị động.

const age = 5;

const user = `{

    "name": "VietnamWorks inTECH",

    "age": ${age},

    "city": "Ho Chi Minh"

}`;

 

console.log(user);

 

// Output

{

    "name": "VietnamWorks inTECH",

    "age": 5,

    "city": "Ho Chi Minh"

}

3. Đối tượng JavaScript và JSON KHÔNG giống nhau

Định dạng dữ liệu JSON được lấy từ cấu trúc đối tượng JavaScript. Các đối tượng trong JavaScript:

• Có thể có các phương thức và JSON thì không.

• Các key có thể không có dấu ngoặc kép.

• Được phép comment.

• Là entity riêng của JavaScript.

4. Cách chuyển đổi JSON thành đối tượng JavaScript và ngược lại

JavaScript có hai phương thức tích hợp để chuyển đổi dữ liệu JSON thành đối tượng JavaScript và ngược lại.

Cách chuyển đổi dữ liệu JSON thành đối tượng JavaScript

Để chuyển đổi dữ liệu JSON thành đối tượng JavaScript, hãy sử dụng phương thức JSON.parse(). Nó phân tích một chuỗi JSON hợp lệ thành một đối tượng JavaScript.

const userJSONData = `{

    "name": "VietnamWorks inTECH",

    "age": 5,

    "city": "Ho Chi Minh"

}`;

 

const userObj = JSON.parse(userJSONData);

console.log(userObj);

Output:

{name: ‘VietnamWorks inTECH’, age: 5, city: ‘Ho Chi Minh’}

            age: 5

           city: “Ho Chi Minh”

          name: “VietnamWorks inTECH”

            [[Prototype]]: Object

Cách chuyển đổi đối tượng JavaScript thành dữ liệu JSON

Để chuyển đổi một đối tượng JavaScript thành dữ liệu JSON, hãy sử dụng phương thức JSON.stringify().

const userObj = {

    name: 'VietnamWorks inTECH', 

    age: 5, 

    city: 'Ho Chi Minh'

}

 

const userJSONData = JSON.stringify(userObj);

console.log(userJSONData);

Output: {“name” : ”VietnamWorks inTECH“ , “age“ : 2 , “city“ : “Ho Chi Minh“}

Bạn có để ý thuật ngữ JSON chúng ta sử dụng để gọi các phương thức parse() và stringify() ở trên không? Đó là một đối tượng JavaScript tích hợp có tên JSON(cũng có thể được gọi là JSONUtil), nhưng nó không liên quan đến định dạng dữ liệu JSON mà chúng ta đã thảo luận. Vì vậy, đừng nhầm lẫn nhé.

5. Làm cách nào để xử lý các lỗi JSON như "Unexpected token u in JSON at position 1"?

Trong khi xử lý JSON, việc gặp lỗi như thế này khi phân tích cú pháp dữ liệu JSON thành một đối tượng JavaScript là điều hết sức bình thường:

Bất cứ khi nào bạn gặp phải lỗi này, hãy xem xét lại tính hợp lệ của định dạng dữ liệu JSON của bạn. Có thể bạn đã mắc một lỗi nhỏ và đó là nguyên nhân gây ra lỗi đó. Bạn có thể xác thực định dạng dữ liệu JSON của mình bằng cách sử dụng JSON Linter .

Lời kết

Hy vọng từ những chia sẻ trên bạn đã nắm bắt được những thông tin cơ bản về JSON, nếu thấy hay đừng ngại chia sẻ cho bạn bè cùng biết nhé!

VietnamWorks inTECH