Giới thiệu về JSON trong JavaScript

Trong thời đại web hiện đại, việc trao đổi dữ liệu giữa client và server là một phần không thể thiếu trong mọi ứng dụng web. Để dữ liệu có thể di chuyển dễ dàng và hiệu quả giữa các thành phần trong hệ thống, các định dạng dữ liệu chuẩn đã ra đời, trong đó nổi bật nhất là JSON (JavaScript Object Notation). Nhờ vào cú pháp đơn giản, dễ đọc và dễ tích hợp với JavaScript, JSON đã trở thành định dạng phổ biến nhất trong phát triển web.

Từ việc truyền nhận dữ liệu qua API, đến lưu trữ cục bộ trong trình duyệt, JSON đóng vai trò quan trọng giúp xây dựng các ứng dụng web tương tác, nhanh và mượt mà hơn. Trong bài viết này, mình sẽ tìm hiểu tổng quan về JSON, cách sử dụng trong JavaScript, và ứng dụng thực tiễn của nó trong lập trình web.

JSON là gì?

Định nghĩa JSON

JSON (JavaScript Object Notation) là một định dạng dữ liệu có cấu trúc, được sử dụng rộng rãi để trao đổi thông tin giữa client và server trong các ứng dụng web. JSON có nguồn gốc từ cú pháp của JavaScript, nhưng hiện nay được hỗ trợ bởi hầu hết các ngôn ngữ lập trình phổ biến như Python, PHP, Java, C#, v.v.

JSON chủ yếu được dùng để lưu trữ và truyền dữ liệu dưới dạng văn bản giữa các hệ thống. Với cú pháp đơn giản và rõ ràng, JSON giúp dữ liệu trở nên dễ hiểu với cả máy và con người.

Đặc điểm của JSON

• Dạng văn bản, dễ đọc

JSON là một định dạng thuần văn bản (plain text), có thể đọc được dễ dàng bằng mắt thường. Điều này rất hữu ích trong việc kiểm tra dữ liệu hoặc debug khi lập trình. Ví dụ một đoạn JSON đơn giản:

{
  "name": "Đậu Trung Kiên",
  "age": 5,
  "hobbies": ["vẽ", "xếp hình"]
}

Có cấu trúc giống với object trong JavaScript

Cú pháp JSON gần như giống hệt với cú pháp object trong JavaScript. Dữ liệu được biểu diễn bằng cặp key-value, tương tự như một object:

const person = {
  name: "Kiên",
  age: 5
};

Cách trình bày này giúp việc thao tác với JSON trong JavaScript trở nên dễ dàng và trực quan.

• Dễ chuyển đổi giữa JSON và object

JavaScript hỗ trợ sẵn hai phương thức để chuyển đổi giữa JSON và JavaScript object:

• JSON.stringify(obj) – chuyển từ object sang JSON:

const jsonString = JSON.stringify(person);

JSON.parse(jsonString) – chuyển từ JSON sang object:

const obj = JSON.parse(jsonString);

Nhờ vào khả năng chuyển đổi linh hoạt, JSON trở thành cầu nối hoàn hảo để trao đổi dữ liệu giữa front-end và back-end.

Cấu trúc cơ bản của JSON trong JavaScript

JSON (JavaScript Object Notation) sử dụng cấu trúc đơn giản, trực quan và tương tự như object trong JavaScript. Tuy nhiên, JSON có một số quy tắc cú pháp nghiêm ngặt hơn, đặc biệt là khi sử dụng trong việc truyền và nhận dữ liệu giữa client và server.

Kiểu dữ liệu được hỗ trợ trong JSON

JSON hỗ trợ một tập hợp các kiểu dữ liệu cơ bản, phù hợp với việc mô tả dữ liệu có cấu trúc:

Ví dụ JSON kết hợp nhiều kiểu dữ liệu:

{
  "name": "Hà Minh",
  "age": 21,
  "isStudent": true,
  "skills": ["JavaScript", "HTML", "CSS"],
  "address": {
    "city": "Hà Nội",
    "district": "Cầu Giấy"
  },
  "note": null
}

Quy tắc cú pháp của JSON

Để JSON hợp lệ và dễ dàng được phân tích cú pháp bởi JavaScript và các ngôn ngữ khác, cần tuân thủ các quy tắc sau:

• Dữ liệu JSON luôn bắt đầu bằng {} (object) hoặc [] (array).

• Cặp key - value:
  Mỗi phần tử trong object là một cặp key - value, được phân tách bằng dấu hai chấm :.

"name": "Minh"

Key (tên thuộc tính) luôn phải đặt trong dấu ngoặc kép đôi ", không được dùng ngoặc đơn hoặc không có ngoặc (khác với JavaScript).

Hợp lệ:

{ "age": 30 }

Không hợp lệ:

{ age: 30 }       // Lỗi vì key không có dấu ngoặc kép

Các cặp key-value được phân tách nhau bằng dấu phẩy ,.

{
  "name": "Lan",
  "age": 25,
  "city": "Đà Nẵng"
}

Không có dấu phẩy cuối cùng sau phần tử cuối cùng trong object hoặc array.

Không hợp lệ:

{
  "name": "An",
  "age": 22,
}

Ghi nhớ nhanh cấu trúc JSON

{
  "key1": "value1",
  "key2": 123,
  "key3": true,
  "key4": null,
  "key5": {
    "subKey": "subValue"
  },
  "key6": [1, 2, 3]
}

JSON trong JavaScript

JavaScript hỗ trợ sẵn các phương thức để làm việc với JSON một cách dễ dàng, đặc biệt là khi cần truyền dữ liệu giữa client và server hoặc lưu trữ dữ liệu tạm thời (ví dụ: trong localStorage, sessionStorage).

Chuyển đổi từ Object → JSON: JSON.stringify()

Phương thức JSON.stringify() dùng để chuyển đổi một đối tượng JavaScript thành chuỗi JSON.

Cú pháp:

JSON.stringify(object)

Ví dụ:

const user = {
  name: "Nguyễn Văn A",
  age: 20,
  isStudent: true
};

const jsonString = JSON.stringify(user);
console.log(jsonString); 
// Output: {"name":"Nguyễn Văn A","age":20,"isStudent":true}

Ghi chú:

• Các giá trị là function, undefined, hoặc Symbol sẽ bị bỏ qua khi chuyển đổi.

• Bạn có thể truyền thêm tham số thứ 2 để lọc thuộc tính hoặc làm đẹp chuỗi JSON.

JSON.stringify(user, null, 2); // định dạng đẹp với khoảng trắng

Chuyển đổi từ JSON → Object: JSON.parse()

Phương thức JSON.parse() dùng để chuyển một chuỗi JSON hợp lệ thành đối tượng JavaScript.

Cú pháp:

JSON.parse(jsonString)

Ví dụ:

const jsonData = '{"name":"Nguyễn Văn A","age":20,"isStudent":true}';

const userObject = JSON.parse(jsonData);
console.log(userObject.name); 
// Output: Nguyễn Văn A

Lưu ý khi thao tác với JSON

Kiểm tra chuỗi JSON có hợp lệ:

Nếu chuỗi JSON không đúng cú pháp, JSON.parse() sẽ gây ra lỗi. Vì vậy, nên bọc trong try...catch để xử lý an toàn:

try {
  const obj = JSON.parse(badJson);
} catch (error) {
  console.error("Dữ liệu không hợp lệ:", error);
}

Kiểm tra kiểu dữ liệu đầu vào:

Trước khi sử dụng JSON.stringify() hoặc JSON.parse(), nên đảm bảo dữ liệu đúng kiểu cần thiết, tránh lỗi runtime.

Kết hợp vòng lặp và JSON

Trong thực tế, bạn có thể sử dụng vòng lặp để tạo object/mảng động, sau đó chuyển đổi sang JSON để gửi lên server hoặc lưu trữ:

const list = [];
for (let i = 1; i <= 3; i++) {
  list.push({ id: i, value: `Sản phẩm ${i}` });
}
const jsonList = JSON.stringify(list);
console.log(jsonList);

Ví dụ thực hành với JSON trong JavaScript

Trong phần này, chúng ta sẽ thực hành các thao tác cơ bản với JSON trong JavaScript thông qua một số ví dụ quen thuộc trong phát triển web.

Tạo Object và chuyển sang JSON

Giả sử bạn có một đối tượng người dùng trong JavaScript và muốn gửi nó lên server, trước tiên bạn cần chuyển nó sang định dạng JSON.

Ví dụ:

const user = {
  name: "Lê Minh Tuấn",
  email: "[email protected]",
  age: 25,
  active: true
};

const jsonString = JSON.stringify(user);

console.log("JSON String:", jsonString);
// Output: {"name":"Lê Minh Tuấn","email":"[email protected]","age":25,"active":true}

Bạn có thể dùng jsonString này để gửi qua AJAX hoặc lưu vào LocalStorage.

Nhận JSON từ server và hiển thị

Trong thực tế, dữ liệu từ server thường được trả về dưới dạng JSON. Bạn có thể dùng fetch() hoặc XMLHttpRequest để nhận và xử lý dữ liệu đó.

Ví dụ với Fetch API:

fetch("https://api.example.com/users/1")
  .then(response => response.json())
  .then(data => {
    console.log("Tên người dùng:", data.name);
    document.getElementById("username").textContent = data.name;
  })
  .catch(error => console.error("Lỗi khi nhận JSON:", error));

Giả sử phản hồi JSON từ server:

{
  "name": "Trần Thị Mai",
  "email": "[email protected]",
  "age": 22
}

Lưu dữ liệu JSON vào LocalStorage

Trình duyệt cung cấp localStorage để lưu trữ dữ liệu dưới dạng chuỗi. Để lưu object, bạn phải chuyển sang chuỗi JSON trước khi lưu.

Lưu:

const settings = {
  theme: "dark",
  fontSize: 14,
  language: "vi"
};

localStorage.setItem("userSettings", JSON.stringify(settings));

Lấy ra và chuyển lại thành object:

const settingsFromStorage = localStorage.getItem("userSettings");

if (settingsFromStorage) {
  const parsedSettings = JSON.parse(settingsFromStorage);
  console.log("Giao diện người dùng:", parsedSettings.theme);
}

Ứng dụng thực tế của JSON trong JavaScript

JSON là định dạng dữ liệu phổ biến trong phát triển web và ứng dụng nhờ vào tính đơn giản, nhẹ và tương thích tốt với JavaScript. Dưới đây là một số ứng dụng điển hình của JSON:

Truyền dữ liệu giữa client và server (AJAX, Fetch API)

JSON được sử dụng để gửi và nhận dữ liệu trong các ứng dụng web hiện đại.

Ví dụ:

fetch("/api/user", {
  method: "POST",
  body: JSON.stringify({ name: "Tuan", email: "[email protected]" }),
  headers: { "Content-Type": "application/json" }
})

Dữ liệu được gửi ở định dạng JSON giúp server dễ dàng phân tích và xử lý.

Giao tiếp với REST API

Hầu hết các RESTful API hiện nay đều sử dụng JSON làm định dạng trả về mặc định.

Ví dụ khi gọi API:

fetch("https://api.example.com/products")
  .then(response => response.json())
  .then(data => {
    console.log("Danh sách sản phẩm:", data);
  });

Cấu hình ứng dụng (dùng file .json)

Nhiều ứng dụng dùng file .json để lưu trữ các cấu hình như thông tin môi trường, setting UI, v.v.

Ví dụ: config.json

{
  "apiBaseUrl": "https://api.example.com",
  "theme": "dark",
  "language": "vi"
}

Lưu trữ dữ liệu cục bộ (localStorage/sessionStorage)

JSON được dùng để lưu trữ dữ liệu tạm thời trong trình duyệt.

const user = { name: "Trang", loggedIn: true };
localStorage.setItem("user", JSON.stringify(user));

{ name: "Linh" } // Sai vì key không nằm trong dấu ngoặc kép

try {
  const data = JSON.parse(jsonString);
} catch (err) {
  console.error("Lỗi khi parse JSON:", err);
}

const obj = { createdAt: new Date().toISOString() };