TÀI LIỆU HAY - CHIA SẺ KHÓA HỌC MIỄN PHÍ

JSON (JavaScript Object Notation) là một định dạng dữ liệu phổ biến được sử dụng để lưu trữ và truyền tải dữ liệu giữa các máy khác nhau trên internet. Sử dụng JSON trong JavaScript là cách tuyệt vời để tạo ra các ứng dụng web động và hiệu quả.

Trong bài viết này, chúng ta sẽ tìm hiểu về các khái niệm cơ bản của JSON và cách sử dụng nó trong JavaScript.

1. Cú pháp JSON

JSON được viết dưới dạng các đối tượng, mảng, chuỗi và số. Đối tượng trong JSON được bao quanh bởi các dấu ngoặc nhọn {} và được phân tách bởi dấu phẩy. Ví dụ:

{
"name": "John Doe",
"age": 30
}

Trong ví dụ trên, "name" và "age" là các thuộc tính của đối tượng. Thuộc tính được kết hợp với giá trị của nó bởi dấu hai chấm.

Mảng trong JSON được bao quanh bởi các dấu ngoặc vuông [] và cũng được phân tách bởi dấu phẩy. Ví dụ:

[
1,
2,
3
]

Trong ví dụ trên, mảng chứa ba giá trị số nguyên.

Chuỗi trong JSON cũng được bao quanh bởi dấu ngoặc kép "". Ví dụ:

"hello world"

Trong ví dụ trên, chuỗi chứa cụm từ "hello world".

2. Quá trình gửi và nhận dữ liệu JSON

Khi gửi dữ liệu JSON từ máy chủ đến trình duyệt, dữ liệu phải được chuyển đổi thành chuỗi JSON bằng cách sử dụng hàm JSON.stringify(). Ví dụ:

var data = {
"name": "John Doe",
"age": 30
};
var jsonData = JSON.stringify(data);

Trong ví dụ trên, biến data chứa các thuộc tính "name" và "age". Hàm JSON.stringify() được sử dụng để chuyển đổi dữ liệu thành chuỗi JSON và lưu trữ kết quả vào biến jsonData.

Khi nhận dữ liệu từ máy chủ, chuỗi JSON phải được chuyển đổi thành đối tượng JavaScript bằng cách sử dụng hàm JSON.parse(). Ví dụ:

var jsonData = '{"name": "John Doe", "age": 30}';
var data = JSON.parse(jsonData);

Trong ví dụ trên, biến jsonData chứa chuỗi JSON. Hàm JSON.parse() được sử dụng để chuyển đổi chuỗi này thành đối tượng JavaScript và lưu trữ kết quả vào biến data.

3. Ví dụ sử dụng JSON trong JavaScript

Một ví dụ sử dụng JSON trong JavaScript là tạo ra một bảng dữ liệu từ một danh sách các đối tượng JSON được nhận từ máy chủ. Ví dụ:

// Một đối tượng JSON đơn giản
var person1 = {
"name": "John Doe",
"age": 30
};

// Một danh sách đối tượng JSON
var people = [
{
"name": "John Doe",
"age": 30
},
{
"name": "Jane Doe",
"age": 25
},
{
"name": "Jim Doe",
"age": 32
}
];

// Tạo bảng dữ liệu từ danh sách đối tượng JSON
var table = "";
for (var i = 0; i < people.length; i++) {
table += "";
}
table += "

Name	Age
" + people[i].name + "	" + people[i].age + "

";
document.getElementById("table-div").innerHTML = table;

Trong ví dụ trên, biến people chứa danh sách các đối tượng JSON. Một vòng lặp được sử dụng để tạo ra các hàng của bảng dữ liệu từ thuộc tính "name" và "age" của mỗi đối tượng. Cuối cùng, kết quả được ghi vào một phần tử div trong HTML.

Trong tổng quan, JSON là một công cụ hữu ích để làm việc với dữ liệu trong JavaScript. Bạn có thể tạo ra các ứng dụng web phức tạp và hiệu quả bằng cách sử dụng JSON để lưu trữ và truyền tải các dữ liệu trên internet.