JSON là gì?

JSON là gì? Sử dụng JSON như thế nào?

Định nghĩa

JSON viết tắt từ JavaScript Object Notation, là một định dạng dữ liệu dựa trên văn bản được sử dụng để lưu trữ và trao đổi dữ liệu. File chỉ chứa văn bản và sử dụng phần mở rộng  .json .

Ví dụ:

// .json
{
    "name": "John",
    "age": 22,
    "gender": "male",

}

Trong JSON, dữ liệu được lưu dưới dạng key: value (khoá: giá trị) được ngăn cách bằng dấu phẩy , .

JSON được bắt nguồn từ JavaScript. Vì vậy, cú pháp JSON giống với cú pháp theo nghĩa đen của đối tượng JavaScript. Tuy nhiên, định dạng JSON cũng có thể được truy cập và được tạo bởi các ngôn ngữ lập trình khác.

Lưu ý: Đối tượng JavaScript và JSON không giống nhau. Bạn sẽ thấy được sự khác nhau giữa chúng trong bài viết này.


JSON Data

Dữ liệu JSON bao gồm các cặp khóa: giá trị tương tự như các thuộc tính đối tượng JavaScript. Khóa và giá trị được viết trong dấu ngoặc kép cách nhau bằng dấu hai chấm : .

Ví dụ:

// JSON data
"name": "John"

Lưu ý: Dữ liệu JSON yêu cầu dấu ngoặc kép cho khóa.


JSON Object

Đối tượng JSON được viết bên trong dấu ngoặc nhọn { } . Các đối tượng JSON có thể chứa nhiều cặp khóa: giá trị.

Ví dụ:

// JSON object
{ "name": "John", "age": 22 }

JSON Array

Mảng JSON được viết bên trong dấu ngoặc vuông [ ] .

Ví dụ:

// JSON array
[ "apple", "mango", "banana"]

// JSON array containing objects
[
    { "name": "John", "age": 22 },
    { "name": "Peter", "age": 20 }.
    { "name": "Mark", "age": 23 }
]

Lưu ý: Dữ liệu JSON có thể chứa các đối tượng và mảng. Tuy nhiên, không giống như các đối tượng JavaScript, dữ liệu JSON không thể chứa các hàm dưới dạng giá trị.

Truy cập dữ liệu JSON

Bạn có thể truy cập dữ liệu JSON bằng cách sử dụng ký hiệu dấu chấm.

Ví dụ:

// JSON object
const data = {
    "name": "John",
    "age": 22,
    "hobby": {
	"reading" : true,
	"gaming" : false,
	"sport" : "football"
    },
    "class" : ["JavaScript", "HTML", "CSS"]
}

// accessing JSON object
console.log(data.name); // John
console.log(data.hobby); // { gaming: false, reading: true, sport: "football"}

console.log(data.hobby.sport); // football
console.log(data.class[1]); // HTML

Chúng ta sử dụng ký hiệu . để truy cập dữ liệu JSON. Cú pháp của nó là variableName.key .

Bạn cũng có thể sử dụng cú pháp dấu ngoặc vuông [ ] để truy cập dữ liệu JSON.

Ví dụ:

// JSON object
const data = {
    "name": "John",
    "age": 22
}

// accessing JSON object
console.log(data["name"]); // John

So sánh JavaScript Object và JSON

JSONJavaScript Object
Khóa trong cặp khóa: giá trị phải nằm trong dấu ngoặc képKhóa trong cặp khóa: giá trị có thể không cần dấu ngoặc kép
JSON không được chứa các hàmCác đối tượng JavaScript có thể chứa các hàm
JSON có thể được tạo và sử dụng bởi các ngôn ngữ lập trình khácCác đối tượng JavaScript chỉ có thể được sử dụng trong JavaScript.

Chuyển đổi JSON thành đối tượng JavaScript

Bạn có thể chuyển đổi dữ liệu JSON sang một đối tượng JavaScript bằng cách sử dụng hàm JSON.parse() có sẵn.

Ví dụ:

// json object
const jsonData = '{ "name": "John", "age": 22 }';

// converting to JavaScript object
const obj = JSON.parse(jsonData);

// accessing the data
console.log(obj.name); // John

Chuyển đổi đối tượng JavaScript thành JSON

Bạn cũng có thể chuyển đổi các đối tượng JavaScript sang định dạng JSON bằng cách sử dụng hàm JSON.stringify() được tích hợp sẵn trong JavaScript.

Ví dụ:

// JavaScript object
const jsonData = { "name": "John", "age": 22 };

// converting to JSON
const obj = JSON.stringify(jsonData);

// accessing the data
console.log(obj); // "{"name":"John","age":22}"

Khi nào sử dụng JSON?

JSON là định dạng được sử dụng phổ biến nhất để truyền dữ liệu (trao đổi dữ liệu) từ máy chủ (server) đến máy khách (client) và ngược lại. Dữ liệu JSON rất dễ phân tích cú pháp và sử dụng, truy cập và thao tác dữ liệu JSON nhanh chóng vì chúng chỉ chứa văn bản.

JSON độc lập với ngôn ngữ. Bạn cũng có thể tạo và sử dụng JSON trong các ngôn ngữ lập trình khác, chứ không chỉ mỗi JavaScript.

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

CodeGym Full-stack

Leave a Reply

Your email address will not be published. Required fields are marked *