# JavaScript - JSON: Hướng dẫn cho người mới bắt đầu

Xin chào các pháp sư lập trình tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của JSON. Đừng lo lắng nếu bạn chưa từng nghe về nó trước đây - vào cuối bài hướng dẫn này, bạn sẽ tự tin làm việc với JSON như một chuyên gia. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng chúng ta lặn vào!

## JSON là gì?

JSON, viết tắt của JavaScript Object Notation, là một định dạng trao đổi dữ liệu nhẹ. Bây giờ tôi biết điều đó có vẻ như một từ khó, nhưng hãy nghĩ về nó như một cách để các máy tính giao tiếp với nhau và chia sẻ thông tin theo cách dễ hiểu đối với cả máy móc và con người.

Hãy tưởng tượng bạn đang truyền纸条 trong lớp (tất nhiên, tôi không khuyến khích điều đó!). JSON giống như một cách tiêu chuẩn để viết những纸条 đó để bất kỳ ai đọc chúng đều có thể hiểu thông điệp nhanh chóng và dễ dàng.

## Tính năng của JSON

Trước khi chúng ta đi vào chi tiết, hãy xem những gì làm cho JSON đặc biệt:

1. Nó nhẹ và dễ đọc.
2. Nó độc lập với ngôn ngữ (không chỉ cho JavaScript!).
3. Nó dựa trên hai cấu trúc phổ biến: đối tượng và mảng.

Những tính năng này làm cho JSON trở thành lựa chọn tuyệt vời cho việc lưu trữ và truyền tải dữ liệu, đó là lý do tại sao nó được sử dụng rộng rãi trong các ứng dụng web.

## Cú pháp JSON

Bây giờ, hãy xem qua cú pháp cơ bản của JSON. Đừng lo lắng nếu nó trông có vẻ lạ lẫm ban đầu - chúng ta sẽ phân tích nó từng bước.

```json
{
  "name": "John Doe",
  "age": 30,
  "city": "New York"
}

Đây là một đối tượng JSON đơn giản. Hãy phân tích nó:

JavaScript - JSON

Toàn bộ đối tượng được bao bọc trong dấu ngoặccurl {}.
Bên trong, chúng ta có các cặp khóa-giá trị.
Khóa luôn là chuỗi, được bao bọc trong dấu ngoặc kép.
Giá trị có thể là chuỗi, số, boolean, mảng, đối tượng hoặc null.
Các cặp khóa-giá trị được phân tách bằng dấu phẩy.

Dữ liệu JSON

JSON có thể đại diện cho nhiều loại dữ liệu khác nhau. Hãy xem một số ví dụ:

Chuỗi

{"message": "Hello, World!"}

Số

{"age": 30}

Boolean

{"isStudent": true}

Null

{"spouse": null}

Nhớ rằng, JSON tất cả về việc đại diện dữ liệu theo cách dễ hiểu và sử dụng. Hãy nghĩ về nó như việc tạo một hồ sơ chi tiết cho mỗi piece của thông tin.

Đối tượng JSON

Chúng ta đã thấy một đối tượng JSON đơn giản, nhưng hãy đi sâu hơn một chút. JSON có thể chứa nhiều cặp khóa-giá trị và thậm chí là các đối tượng con.

{
  "person": {
    "name": "Alice",
    "age": 25,
    "hobbies": ["reading", "cycling", "photography"],
    "address": {
      "street": "123 Main St",
      "city": "Wonderland"
    }
  }
}

Trong ví dụ này, chúng ta có một đối tượng chính với khóa "person". Giá trị của "person" là một đối tượng khác chứa nhiều thông tin khác nhau. Lưu ý cách chúng ta có thể chèn các đối tượng và thậm chí là các mảng (chúng ta sẽ nói nhiều hơn về chúng sau).

Mảng JSON

Mảng trong JSON là các danh sách các giá trị có thứ tự. Chúng được bao bọc trong dấu ngoặc vuông [] và có thể chứa bất kỳ loại dữ liệu JSON nào.

{
  "fruits": ["apple", "banana", "cherry"],
  "numbers": [1, 2, 3, 4, 5],
  "mix": [42, "answer", true, null]
}

Mảng rất hữu ích khi bạn muốn đại diện cho một bộ sưu tập các mục liên quan. Ví dụ như một danh sách các nguyên liệu trong một công thức hoặc một danh sách các điểm cao trong một trò chơi.

Truy cập dữ liệu JSON

Bây giờ chúng ta đã biết cách cấu trúc dữ liệu JSON, hãy học cách truy cập nó trong JavaScript. Chúng ta sẽ sử dụng đối tượng person từ trước làm ví dụ.

let data = {
  "person": {
    "name": "Alice",
    "age": 25,
    "hobbies": ["reading", "cycling", "photography"],
    "address": {
      "street": "123 Main St",
      "city": "Wonderland"
    }
  }
};

console.log(data.person.name); // Output: Alice
console.log(data.person.hobbies[1]); // Output: cycling
console.log(data.person.address.city); // Output: Wonderland

Như bạn có thể thấy, chúng ta sử dụng dấu chấm để truy cập các thuộc tính của đối tượng và dấu ngoặc vuông để truy cập các phần tử của mảng. Nó giống như theo dõi một bản đồ để tìm chính xác piece của thông tin bạn muốn!

Phương thức JSON

JavaScript cung cấp hai phương thức chính để làm việc với JSON:

Phương thức	Mô tả
JSON.parse()	Chuyển đổi một chuỗi JSON thành một đối tượng JavaScript
JSON.stringify()	Chuyển đổi một đối tượng JavaScript thành một chuỗi JSON

Hãy xem chúng trong hành động:

// JSON.parse()
let jsonString = '{"name": "John", "age": 30}';
let obj = JSON.parse(jsonString);
console.log(obj.name); // Output: John

// JSON.stringify()
let person = {name: "Alice", age: 25};
let json = JSON.stringify(person);
console.log(json); // Output: {"name":"Alice","age":25}

Những phương thức này giống như những người dịch, giúp JavaScript và JSON giao tiếp hiệu quả.

JSON so với Đối tượng JavaScript

Mặc dù JSON trông rất giống với các đối tượng JavaScript, nhưng có một số khác biệt quan trọng:

Các khóa JSON phải là chuỗi và trong dấu ngoặc kép.
Các giá trị JSON phải là một trong các loại sau: chuỗi, số, đối tượng, mảng, boolean hoặc null.
JSON không hỗ trợ hàm hoặc bình luận.

Dưới đây là một so sánh nhanh:

// Đối tượng JavaScript hợp lệ
let jsObj = {
  name: 'John',
  age: 30,
  greet: function() { console.log('Hello!'); }
};

// JSON tương đương
let jsonObj = {
  "name": "John",
  "age": 30
};

Lưu ý cách hàm và khóa không được bao gồm trong phiên bản JSON.

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

Chúng ta đã thấy cách sử dụng JSON.parse() để chuyển đổi một chuỗi JSON thành một đối tượng JavaScript, nhưng hãy xem một ví dụ phức tạp hơn:

let jsonString = '{"name":"Alice","pets":[{"type":"cat","name":"Fluffy"},{"type":"dog","name":"Rover"}]}';

let obj = JSON.parse(jsonString);

console.log(obj.name); // Output: Alice
console.log(obj.pets[0].name); // Output: Fluffy

Điều này đặc biệt hữu ích khi nhận dữ liệu từ máy chủ, thường được gửi dưới dạng chuỗi JSON.

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

Tương tự, chúng ta có thể sử dụng JSON.stringify() để chuyển đổi các đối tượng JavaScript thành chuỗi JSON. Điều này thường cần thiết khi gửi dữ liệu đến máy chủ.

let person = {
  name: "Bob",
  age: 35,
  hobbies: ["swimming", "painting"],
  address: {
    street: "456 Elm St",
    city: "Dreamland"
  }
};

let jsonString = JSON.stringify(person);
console.log(jsonString);
// Output: {"name":"Bob","age":35,"hobbies":["swimming","painting"],"address":{"street":"456 Elm St","city":"Dreamland"}}

Và thế là bạn đã hoàn thành bài học nhanh về JSON! Nhớ rằng, thực hành làm cho hoàn hảo, vì vậy đừng ngần ngại thử nghiệm với việc tạo và manipulatings dữ liệu JSON. Trước khi bạn biết điều đó, bạn sẽ trở thành một chuyên gia JSON!

Credits: Image by storyset

Hướng Dẫn Trước:

JavaScript - Trình duyệt

Hướng Dẫn Tiếp Theo:

JavaScript - Chữ trong nhiều dòng