Tìm hiểu cú pháp JSON trong JavaScript

Trong thế giới phát triển web hiện đại, việc trao đổi dữ liệu giữa client và server là một phần thiết yếu, và JSON (JavaScript Object Notation) đã trở thành định dạng phổ biến nhất để thực hiện điều đó. Nhờ vào cấu trúc đơn giản, dễ đọc, và khả năng tích hợp tốt với JavaScript, JSON được sử dụng rộng rãi trong các ứng dụng từ nhỏ đến lớn. Tuy nhiên, để khai thác hiệu quả JSON, việc nắm vững cú pháp chuẩn là điều bắt buộc đối với mọi lập trình viên.

Bài viết này sẽ giúp bạn tìm hiểu kỹ về cú pháp JSON trong JavaScript, các quy tắc cần tuân thủ, ví dụ minh họa cụ thể và một số lưu ý quan trọng khi làm việc với JSON trong thực tế.

JSON là gì?

Định nghĩa: JavaScript Object Notation

JSON (JavaScript Object Notation) là một định dạng dữ liệu nhẹ, dễ đọc và dễ ghi. JSON được sử dụng chủ yếu để lưu trữ và truyền tải dữ liệu giữa client và server trong các ứng dụng web. Dù ban đầu được thiết kế để sử dụng trong JavaScript, nhưng JSON có thể được sử dụng trong nhiều ngôn ngữ lập trình khác nhau nhờ vào tính đơn giản và dễ hiểu của nó.

JSON có cấu trúc giống như đối tượng (object) trong JavaScript, với các cặp key-value (khóa - giá trị), trong đó khóa luôn được đặt trong dấu ngoặc kép và giá trị có thể là một chuỗi, số, mảng, hoặc thậm chí là một đối tượng con.

Mục đích: Lưu trữ và trao đổi dữ liệu

JSON chủ yếu được sử dụng trong việc lưu trữ và trao đổi dữ liệu giữa các hệ thống hoặc ứng dụng. Khi trao đổi dữ liệu giữa các hệ thống, JSON giúp giảm thiểu độ phức tạp của dữ liệu, đồng thời đảm bảo tính tương thích cao giữa client (trình duyệt web) và server (máy chủ). Dữ liệu JSON có thể dễ dàng được gửi từ máy chủ đến trình duyệt qua HTTP, và ngược lại.

Các ứng dụng phổ biến của JSON bao gồm:

• API RESTful: Truyền tải dữ liệu giữa client và server.

• Web Services: JSON thường được sử dụng để giao tiếp trong các dịch vụ web.

• Local Storage: Lưu trữ cấu hình, dữ liệu người dùng trong các ứng dụng web.

Ưu điểm: Đơn giản, dễ đọc, tương thích với JavaScript

• Đơn giản và dễ đọc: Cấu trúc của JSON rất dễ hiểu và gần gũi với cú pháp của JavaScript, vì vậy người lập trình có thể dễ dàng đọc và viết dữ liệu JSON.

• Tương thích với JavaScript: JSON được thiết kế để dễ dàng tích hợp và sử dụng trong JavaScript. Các đối tượng JSON có thể dễ dàng được chuyển thành các đối tượng JavaScript (với JSON.parse()) và ngược lại (với JSON.stringify()).

• Được hỗ trợ rộng rãi: Hầu hết các ngôn ngữ lập trình hiện đại đều hỗ trợ làm việc với JSON, khiến cho việc trao đổi dữ liệu trở nên dễ dàng hơn.

JSON trở thành một phần không thể thiếu trong lập trình web, đặc biệt là khi làm việc với API, dữ liệu từ server hoặc khi lưu trữ dữ liệu dưới dạng cấu trúc có thể chia sẻ giữa các hệ thống.

Cú pháp cơ bản của JSON trong JavaScript

Cặp khóa - giá trị (key-value pair)

Cấu trúc cơ bản của JSON là các cặp khóa và giá trị, hay còn gọi là key-value pair. Cặp khóa và giá trị này có thể được dùng để biểu diễn thông tin trong JSON. Cặp này được phân tách bởi dấu hai chấm :.

• Key: Là một chuỗi (string) và luôn phải được đặt trong dấu ngoặc kép " ".

• Value: Là giá trị mà khóa đại diện, có thể là một chuỗi, số, boolean, null, mảng (array), hoặc đối tượng (object).

Dạng chuẩn:

"key": value

Ví dụ:

"name": "John"

Trong đó, "name" là key và "John" là giá trị (value) của key đó.

Các kiểu dữ liệu hợp lệ trong JSON

JSON hỗ trợ một số kiểu dữ liệu cơ bản, bao gồm:

• String: Chuỗi văn bản, luôn phải được đặt trong dấu ngoặc kép " ".

  • Ví dụ: "name": "John"

• Number: Các số, bao gồm cả số nguyên và số thập phân.

  • Ví dụ: "age": 30 hoặc "price": 3.14

• Boolean: Giá trị đúng (true) hoặc sai (false).

  • Ví dụ: "isActive": true

• null: Dùng để biểu thị giá trị "không xác định" hoặc "không có giá trị".

  • Ví dụ: "address": null

• Array: Mảng, chứa một tập hợp các giá trị. Các phần tử trong mảng có thể có bất kỳ kiểu dữ liệu nào.

  • Ví dụ: "numbers": [1, 2, 3] hoặc "fruits": ["apple", "banana", "cherry"]

• Object: Đối tượng, chứa một tập hợp các cặp khóa - giá trị (key-value pairs). Đối tượng có thể lồng nhau và được định nghĩa trong dấu ngoặc nhọn {}.

  • Ví dụ: "person": {"name": "John", "age": 30}

JSON không hỗ trợ

Mặc dù JSON rất linh hoạt, nhưng nó có một số hạn chế và không hỗ trợ một số kiểu dữ liệu hoặc biểu thức phức tạp. Cụ thể, JSON không hỗ trợ:

undefined: Không thể sử dụng giá trị undefined trong JSON. Thay vào đó, bạn có thể sử dụng null.

• Ví dụ: {"value": undefined} sẽ không hợp lệ trong JSON.

Function: Các hàm không thể được lưu trong JSON. Nếu bạn cố gắng thêm một hàm vào JSON, nó sẽ không hợp lệ.

• Ví dụ: {"greet": function() { return "Hello!"; }} không hợp lệ trong JSON.

Biểu thức phức tạp: Các biểu thức phức tạp như new Date(), RegExp hoặc các đối tượng tạo ra từ hàm khởi tạo không thể được lưu trữ dưới dạng JSON. Dữ liệu JSON chỉ hỗ trợ các kiểu dữ liệu đơn giản.

• Ví dụ: {"date": new Date()} không hợp lệ trong JSON.

Ví dụ cú pháp JSON đúng và sai trong JavaScript

Ví dụ đúng

Dưới đây là một ví dụ về cú pháp JSON hợp lệ. JSON này chứa các cặp khóa - giá trị (key-value pairs), với key được bao quanh bởi dấu ngoặc kép, các giá trị phù hợp với các kiểu dữ liệu hợp lệ của JSON.

Ví dụ JSON hợp lệ:

{
  "name": "Alice",
  "age": 25,
  "isStudent": false,
  "skills": ["HTML", "CSS", "JavaScript"]
}

Giải thích:

• Các key ("name", "age", "isStudent", "skills") đều được bao quanh bởi dấu ngoặc kép.

• Các value có thể là chuỗi, số, boolean hoặc mảng, tất cả đều hợp lệ trong JSON.

• Mảng "skills" chứa các chuỗi "HTML", "CSS", "JavaScript".

• Mỗi cặp key-value được phân tách bằng dấu phẩy.

Ví dụ sai (phân tích lỗi)

Dưới đây là một ví dụ JSON sai và phân tích các lỗi trong cú pháp.

Ví dụ JSON sai:

{
  name: "Alice",         // Sai: thiếu dấu ngoặc kép quanh key
  "age": 25,
  "skills": ["JS",]      // Sai: dấu phẩy cuối không hợp lệ
}

Phân tích lỗi:

• Sai 1: name: "Alice" - Key "name" không được đặt trong dấu ngoặc kép. JSON yêu cầu tất cả các key phải là chuỗi và được đặt trong dấu ngoặc kép. Cú pháp chính xác phải là "name": "Alice".

• Sai 2: "skills": ["JS",] - Mảng "skills" có dấu phẩy thừa sau phần tử cuối cùng "JS". JSON không cho phép có dấu phẩy thừa ở cuối mảng hoặc đối tượng. Để sửa, cần loại bỏ dấu phẩy cuối cùng sau phần tử "JS", tức là "skills": ["JS"].

Sử dụng JSON trong JavaScript

Chuyển đổi giữa JSON và Object

Chuyển Object → Chuỗi JSON:

• Để chuyển một đối tượng JavaScript thành chuỗi JSON, ta sử dụng phương thức JSON.stringify(). Phương thức này chuyển đổi đối tượng hoặc mảng thành chuỗi JSON hợp lệ mà có thể truyền tải qua mạng hoặc lưu trữ.

Ví dụ:

const person = {
  name: "Alice",
  age: 25,
  isStudent: false,
  skills: ["HTML", "CSS", "JavaScript"]
};

const jsonString = JSON.stringify(person);
console.log(jsonString);

Output:

{"name":"Alice","age":25,"isStudent":false,"skills":["HTML","CSS","JavaScript"]}

Chuyển Chuỗi JSON → Object:

• Để chuyển chuỗi JSON trở lại thành đối tượng JavaScript, ta sử dụng phương thức JSON.parse(). Phương thức này nhận một chuỗi JSON hợp lệ và trả về đối tượng JavaScript tương ứng.

Ví dụ:

const jsonString = '{"name":"Alice","age":25,"isStudent":false,"skills":["HTML","CSS","JavaScript"]}';
const person = JSON.parse(jsonString);
console.log(person.name);  // "Alice"

Lưu trữ và xử lý dữ liệu JSON

Lưu trữ JSON trong JavaScript: Khi làm việc với JSON, bạn có thể lưu trữ các chuỗi JSON trong các biến và sử dụng chúng trong ứng dụng của mình. Đây là cách đơn giản để quản lý dữ liệu cấu trúc.

Ví dụ:

const jsonString = '{"name":"Alice","age":25,"isStudent":false,"skills":["HTML","CSS","JavaScript"]}';
const person = JSON.parse(jsonString);

// Lưu trữ vào biến
const personName = person.name;  // Alice

Sử dụng JSON trong AJAX/Fetch API: Khi làm việc với AJAX hoặc Fetch API, JSON là định dạng phổ biến để trao đổi dữ liệu giữa client và server. Bạn có thể gửi dữ liệu JSON tới server hoặc nhận dữ liệu JSON từ server.

Ví dụ:

// Gửi JSON với Fetch API
fetch('https://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: "Alice", age: 25 })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Ví dụ với LocalStorage (lưu trữ JSON trong trình duyệt): Bạn có thể sử dụng localStorage để lưu trữ dữ liệu JSON trong trình duyệt, giúp người dùng duy trì trạng thái ứng dụng sau khi tải lại trang.

const user = {
  name: "Alice",
  age: 25,
  isStudent: false
};

// Lưu trữ JSON vào LocalStorage
localStorage.setItem('user', JSON.stringify(user));

// Lấy dữ liệu từ LocalStorage và chuyển đổi lại thành Object
const userData = JSON.parse(localStorage.getItem('user'));
console.log(userData.name);  // Alice

Một số lưu ý khi viết cú pháp JSON trong JavaScript

Khi làm việc với JSON trong JavaScript hoặc bất kỳ ngôn ngữ lập trình nào, có một số quy tắc và lưu ý quan trọng để đảm bảo cú pháp JSON của bạn hợp lệ và dễ dàng sử dụng. Dưới đây là các lưu ý quan trọng:

Key luôn trong dấu ngoặc kép

Trong JSON, các key phải luôn được đặt trong dấu ngoặc kép đôi ("). Đây là một yêu cầu bắt buộc trong cú pháp JSON, khác với JavaScript, nơi bạn có thể sử dụng key không có dấu ngoặc kép nếu key là một chuỗi hợp lệ.

Đúng cú pháp:

{
  "name": "Alice",
  "age": 25
}

Sai cú pháp (Thiếu dấu ngoặc kép quanh key):

{
  name: "Alice",    // Lỗi: key "name" không có dấu ngoặc kép
  "age": 25
}

Việc thiếu dấu ngoặc kép sẽ khiến chuỗi JSON không hợp lệ và không thể xử lý.

Dữ liệu phải hợp lệ về mặt logic và kiểu

Khi viết dữ liệu trong JSON, bạn phải chắc chắn rằng các giá trị của bạn phù hợp với các kiểu dữ liệu hỗ trợ trong JSON. JSON hỗ trợ các kiểu dữ liệu cơ bản như chuỗi (string), số (number), boolean (true/false), null, mảng (array), và đối tượng (object).

• String: "Alice", "123"

• Number: 25, 3.14

• Boolean: true, false

• null: null

• Array: [1, 2, 3], ["apple", "banana"]

• Object: {"name": "Alice", "age": 25}

Ví dụ sai:

{
  "name": "Alice",
  "age": undefined  // Lỗi: "undefined" không phải kiểu hợp lệ trong JSON
}

Trong JSON, bạn không thể sử dụng undefined làm giá trị. Các giá trị phải thuộc một trong các kiểu dữ liệu hợp lệ nêu trên.

Không có dấu phẩy cuối cùng trong danh sách object hoặc array

Một trong những lỗi phổ biến khi viết JSON là để lại dấu phẩy sau phần tử cuối cùng trong mảng hoặc đối tượng. JSON không cho phép có dấu phẩy thừa sau phần tử cuối cùng trong một danh sách. Điều này có thể gây lỗi khi phân tích cú pháp (parse).

Đúng cú pháp:

{
  "name": "Alice",
  "age": 25,
  "skills": ["HTML", "CSS", "JavaScript"]
}

Sai cú pháp (dấu phẩy thừa):

{
  "name": "Alice",
  "age": 25,
  "skills": ["HTML", "CSS", "JavaScript",]  // Lỗi: dấu phẩy sau phần tử cuối cùng trong mảng
}