JavaScript và JSON

Trong hướng dẫn này, bạn sẽ tìm hiểu về JSON và cách JavaScript được sử dụng với JSON với sự trợ giúp của các ví dụ.

JSON là viết tắt của Javacfscript Object Notation. JSON 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à truyền dữ liệu. Ví dụ,

// JSON syntax
{
    "name": "John",
    "age": 22,
    "gender": "male",

}

Trong JSON, dữ liệu nằm trong các cặp khóa / giá trị được phân tá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ẽ tìm hiểu về sự khác biệt của chúng ở phần sau trong hướng dẫn này.

Dữ liệu JSON

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.

Đối tượng JSON

Đố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 }

Mảng JSON

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 tôi 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

Đối tượng JavaScript VS JSON

Mặc dù cú pháp của JSON tương tự như đối tượng JavaScript, nhưng JSON khác với các đối tượng 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 tích hợp sẵn JSON.parse(). 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 tích hợp sẵn JavaScript JSON.stringify(). 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}"

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ủ đến máy khách và ngược lại. Dữ liệu JSON rất dễ phân tích cú pháp và sử dụng. Nhanh chóng truy cập và thao tác dữ liệu JSON 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.