Cách sử dụng định dạng JSON trong JavaScript

Trong lập trình web hiện đại, JSON (JavaScript Object Notation) là một định dạng dữ liệu cực kỳ phổ biến, được sử dụng rộng rãi để trao đổi dữ liệu giữa client và server. JSON có cú pháp đơn giản, dễ đọc, dễ viết và được hỗ trợ tốt trong JavaScript cũng như nhiều ngôn ngữ lập trình khác.

Với sự phát triển mạnh mẽ của các ứng dụng web và API, việc hiểu và sử dụng JSON một cách hiệu quả là một kỹ năng quan trọng đối với mọi lập trình viên. Trong bài viết này, chúng ta sẽ tìm hiểu về JSON, cách chuyển đổi giữa JSON và JavaScript Object, cũng như cách sử dụng JSON trong thực tế.

JSON trong JavaScript là gì?

JSON (JavaScript Object Notation) là một định dạng dữ liệu có cấu trúc, được thiết kế để lưu trữ và trao đổi dữ liệu giữa các hệ thống. JSON sử dụng một cú pháp đơn giản, dựa trên các cặp key-value tương tự như JavaScript Object nhưng có một số quy tắc chặt chẽ hơn.

JSON thường được dùng để:

• Truyền tải dữ liệu giữa client (trình duyệt) và server trong các ứng dụng web.
• Lưu trữ cấu hình, dữ liệu trong file .json.
• Giao tiếp giữa các hệ thống thông qua API (REST API, GraphQL).

Ví dụ về một dữ liệu JSON:

{
  "name": "Nguyễn Văn A",
  "age": 25,
  "email": "[email protected]",
  "skills": ["JavaScript", "React", "Node.js"]
}

Lý do JSON được sử dụng rộng rãi

JSON trở thành một tiêu chuẩn phổ biến trong lập trình web nhờ những ưu điểm sau:

Dễ đọc, dễ viết

• Cú pháp đơn giản, không rườm rà như XML.
• Giống với cách JavaScript định nghĩa object nên rất quen thuộc với lập trình viên.

Nhẹ hơn so với XML

• JSON có kích thước nhỏ hơn, không cần các thẻ đóng mở như XML.
• Dữ liệu JSON được truyền tải nhanh hơn, tiết kiệm băng thông.

So sánh JSON và XML:

Hỗ trợ tốt trong JavaScript và nhiều ngôn ngữ khác

• JavaScript có sẵn công cụ xử lý JSON: JSON.parse() và JSON.stringify().
• JSON có thể được sử dụng trong Python, Java, C#, PHP, Ruby, v.v.
• Là định dạng chuẩn của nhiều dịch vụ API hiện đại như REST API, Firebase, MongoDB.

Cách sử dụng JSON trong JavaScript

JSON là một phần quan trọng trong lập trình JavaScript, đặc biệt khi làm việc với dữ liệu từ API hoặc lưu trữ cấu hình. Dưới đây là cách sử dụng JSON trong JavaScript một cách chi tiết.

Cấu trúc của JSON

JSON có hai kiểu dữ liệu chính

• Object (đối tượng): Là tập hợp các cặp key-value, được đặt trong dấu {}.
• Array (mảng): Là danh sách các giá trị, được đặt trong dấu [].

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

Trong JSON, chỉ các kiểu dữ liệu sau đây được hỗ trợ:

• String – Chuỗi phải được đặt trong dấu "" (không sử dụng ' như trong JavaScript).
• Number – Hỗ trợ số nguyên và số thực.
• Boolean – true hoặc false.
• Null – Giá trị null.
• Object – Đối tượng JSON.
• Array – Mảng JSON.

Ví dụ JSON hợp lệ

{
  "name": "John",
  "age": 30,
  "isStudent": false,
  "skills": ["JavaScript", "React", "Node.js"],
  "address": {
    "city": "New York",
    "country": "USA"
  }
}

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

Trong JavaScript, chúng ta cần chuyển đổi giữa Object (đối tượng JavaScript) và chuỗi JSON khi làm việc với dữ liệu từ API hoặc lưu trữ dữ liệu.

Chuyển đổi từ Object sang JSON (Serialization)

Dùng JSON.stringify() để chuyển Object thành chuỗi JSON.

Ví dụ:

const user = { 
  name: "Alice", 
  age: 25, 
  city: "New York" 
};

const jsonString = JSON.stringify(user);
console.log(jsonString); 
// Output: {"name":"Alice","age":25,"city":"New York"}

Lợi ích của JSON.stringify():

• Giúp chuyển Object thành chuỗi JSON để lưu trữ hoặc gửi đến server.
• Dữ liệu có thể được lưu vào localStorage, sessionStorage, database hoặc gửi qua API.

Tùy chọn trong JSON.stringify()

JSON.stringify(object, replacer, space)

• replacer: Hàm hoặc mảng dùng để lọc ra các key cần giữ lại.
• space: Số khoảng trắng để format JSON dễ đọc hơn.

Ví dụ sử dụng space để format JSON đẹp hơn:

const formattedJSON = JSON.stringify(user, null, 2);
console.log(formattedJSON);
/* Output:
{
  "name": "Alice",
  "age": 25,
  "city": "New York"
}
*/

b) Chuyển đổi từ JSON sang Object (Deserialization)
Dùng JSON.parse() để chuyển chuỗi JSON thành Object.

Ví dụ:

const wrongJson = "{name:'Alice', age:25}"; // Lỗi vì thiếu dấu "" quanh key
console.log(JSON.parse(wrongJson)); 
// Uncaught SyntaxError: Unexpected token n in JSON at position 1

const correctJson = '{"name":"Alice","age":25}';
console.log(JSON.parse(correctJson)); // {name: "Alice", age: 25}

fetch("https://jsonplaceholder.typicode.com/users/1")
  .then(response => response.json())  // Chuyển đổi JSON thành Object
  .then(data => console.log(data))    // Hiển thị dữ liệu
  .catch(error => console.error("Lỗi:", error));

{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "[email protected]"
}

const newUser = {
  name: "Alice",
  email: "[email protected]"
};

fetch("https://jsonplaceholder.typicode.com/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(newUser)
})
  .then(response => response.json()) 
  .then(data => console.log("Phản hồi từ server:", data))
  .catch(error => console.error("Lỗi:", error));

const obj = {
  name: "Bob",
  greet: function () {
    return "Hello!";
  }
};

console.log(JSON.stringify(obj)); 
// Output: {"name":"Bob"}  (hàm greet đã bị loại bỏ)

const obj = {
  name: "Bob",
  greet: "function() { return 'Hello!'; }"
};

const jsonString = JSON.stringify(obj);
console.log(jsonString);
// Output: {"name":"Bob","greet":"function() { return 'Hello!'; }"}

const parsedObj = JSON.parse(jsonString);
parsedObj.greet = new Function("return 'Hello!';");
console.log(parsedObj.greet()); // Output: Hello!

const invalidJson = "{ name: 'Alice' }";  // Lỗi vì thiếu dấu ngoặc kép quanh key
const data = JSON.parse(invalidJson);  
// Uncaught SyntaxError: Unexpected token n in JSON

const invalidJson = "{ name: 'Alice' }"; // JSON sai cú pháp

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

Lỗi khi parse JSON: Unexpected token n in JSON at position 2

const obj = { 
  name: "Eve", 
  age: undefined, 
  greet: () => "Hello", 
  symbolKey: Symbol("id")
};

console.log(JSON.stringify(obj)); 
// Output: {"name":"Eve"}  (Các giá trị `undefined`, function và Symbol đã bị loại bỏ)

const obj = { name: "Eve", age: undefined || null };
console.log(JSON.stringify(obj)); 
// Output: {"name":"Eve","age":null}

const obj = { 
  name: "Eve", 
  greet: "function() { return 'Hello!'; }" 
};

console.log(JSON.stringify(obj)); 
// Output: {"name":"Eve","greet":"function() { return 'Hello!'; }"}

const obj = { 
  name: "Eve", 
  age: undefined, 
  greet: () => "Hello", 
  symbolKey: Symbol("id")
};

// replacer function: Chỉ giữ lại key có kiểu dữ liệu hợp lệ
const jsonString = JSON.stringify(obj, (key, value) => {
  if (typeof value === "undefined" || typeof value === "function" || typeof value === "symbol") {
    return null;
  }
  return value;
});

console.log(jsonString); 
// Output: {"name":"Eve"}

const user = { name: "Charlie", age: 28 };

// Chuyển đổi object thành JSON và lưu vào LocalStorage
localStorage.setItem("user", JSON.stringify(user));

// Lấy dữ liệu từ LocalStorage và chuyển thành object
const storedUser = JSON.parse(localStorage.getItem("user"));

console.log(storedUser); 
// Output: { name: "Charlie", age: 28 }

const sessionData = { token: "abc123", expiresIn: 3600 };

// Lưu vào SessionStorage
sessionStorage.setItem("session", JSON.stringify(sessionData));

// Lấy dữ liệu từ SessionStorage
const storedSession = JSON.parse(sessionStorage.getItem("session"));

console.log(storedSession); 
// Output: { token: "abc123", expiresIn: 3600 }

fetch("https://jsonplaceholder.typicode.com/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    name: "Alice",
    email: "[email protected]"
  })
})
  .then(response => response.json()) // Chuyển đổi JSON response thành Object
  .then(data => console.log("Response từ server:", data))
  .catch(error => console.error("Lỗi:", error));

{
  "appName": "MyApp",
  "version": "1.0.0",
  "database": {
    "host": "localhost",
    "port": 3306,
    "username": "admin",
    "password": "123456"
  }
}

fetch("./config.json")
  .then(response => response.json()) // Chuyển đổi JSON thành Object
  .then(config => console.log("Cấu hình:", config))
  .catch(error => console.error("Lỗi khi đọc file:", error));

import { initializeApp } from "firebase/app";
import { getFirestore, doc, setDoc, getDoc } from "firebase/firestore"; 

// Cấu hình Firebase
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project-id",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Khởi tạo Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Lưu dữ liệu JSON vào Firestore
const saveUser = async () => {
  await setDoc(doc(db, "users", "user1"), {
    name: "David",
    age: 25,
    email: "[email protected]"
  });
  console.log("Dữ liệu đã được lưu");
};

// Lấy dữ liệu JSON từ Firestore
const getUser = async () => {
  const docSnap = await getDoc(doc(db, "users", "user1"));
  if (docSnap.exists()) {
    console.log("Dữ liệu người dùng:", docSnap.data());
  } else {
    console.log("Không tìm thấy dữ liệu");
  }
};

// Gọi hàm lưu và lấy dữ liệu
saveUser();
getUser();