JSON là gì? Sử dụng JSON như thế nào? | Học JavaScript

Đị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ụ:

{

"name"

:

"John"

,

"age"

:

22

,

"gender"

:

"male"

, }

Code language:

JSON / JSON with Comments

(

json

)

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ụ:

"name"

:

"John"

Code language:

JavaScript

(

javascript

)

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ụ:

{

"name"

:

"John"

,

"age"

:

22

}

Code language:

JSON / JSON with Comments

(

json

)

JSON Array

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

Ví dụ:

[

"apple"

,

"mango"

,

"banana"

] [ {

"name"

:

"John"

,

"age"

:

22

}, {

"name"

:

"Peter"

,

"age"

:

20

}. {

"name"

:

"Mark"

,

"age"

:

23

} ]

Code language:

JSON / JSON with Comments

(

json

)

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ụ:

const

data = {

"name"

:

"John"

,

"age"

:

22

,

"hobby"

: {

"reading"

:

true

,

"gaming"

:

false

,

"sport"

:

"football"

},

"class"

: [

"JavaScript"

,

"HTML"

,

"CSS"

] }

console

.log(data.name);

console

.log(data.hobby);

console

.log(data.hobby.sport);

console

.log(data.class[

1

]);

Code language:

JavaScript

(

javascript

)

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ụ:

const

data = {

"name"

:

"John"

,

"age"

:

22

}

console

.log(data[

"name"

]);

Code language:

JavaScript

(

javascript

)

So sánh JavaScript Object và JSON

JSONJavaScript ObjectKhó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épJSON không được chứa các hàmCác đối tượng JavaScript có thể chứa các hàmJSON 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ụ:

const

jsonData =

'{ "name": "John", "age": 22 }'

;

const

obj =

JSON

.parse(jsonData);

console

.log(obj.name);

Code language:

JavaScript

(

javascript

)

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ụ:

const

jsonData = {

"name"

:

"John"

,

"age"

:

22

};

const

obj =

JSON

.stringify(jsonData);

console

.log(obj);

Code language:

JavaScript

(

javascript

)

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.

Chia sẻ