Khai báo đối tượng JSON bằng cú pháp literal trong JavaScript

Trong lập trình JavaScript hiện đại, JSON (JavaScript Object Notation) là một phần không thể thiếu khi làm việc với dữ liệu, đặc biệt trong các ứng dụng web, mobile hay API. JSON cho phép lưu trữ và trao đổi dữ liệu một cách rõ ràng, có cấu trúc và dễ thao tác. Một trong những cách đơn giản và phổ biến nhất để khởi tạo và sử dụng dữ liệu JSON trong JavaScript chính là thông qua cú pháp literal – một cú pháp ngắn gọn, trực quan, giúp định nghĩa đối tượng nhanh chóng. Việc nắm vững cách khai báo đối tượng JSON bằng cú pháp literal sẽ giúp lập trình viên dễ dàng xây dựng và xử lý dữ liệu trong quá trình phát triển ứng dụng.

JSON là gì?

Định nghĩa JSON (JavaScript Object Notation):
JSON là một định dạng dữ liệu nhẹ, dễ đọc và dễ ghi. Nó được sử dụng chủ yếu để lưu trữ và trao đổi dữ liệu giữa các hệ thống. JSON là định dạng chuẩn cho dữ liệu văn bản, có thể dễ dàng truyền qua mạng và được hầu hết các ngôn ngữ lập trình hỗ trợ.

Mục đích sử dụng:

• Lưu trữ dữ liệu: JSON có thể được sử dụng để lưu trữ cấu trúc dữ liệu trong các tệp tin hoặc cơ sở dữ liệu.

• Truyền dữ liệu giữa client và server: JSON là định dạng phổ biến trong giao tiếp giữa trình duyệt và server, đặc biệt khi sử dụng API hoặc khi gửi/nhận dữ liệu trong các ứng dụng web.

• Định dạng dễ đọc: Với cấu trúc rõ ràng và dễ hiểu, JSON giúp người phát triển dễ dàng xử lý và phân tích dữ liệu.

Cấu trúc của JSON:
JSON là một chuỗi văn bản, được cấu trúc theo dạng cặp khóa-giá trị (key-value pairs), có thể bao gồm các kiểu dữ liệu như chuỗi, số, mảng, đối tượng con, hoặc giá trị boolean (true/false).

Cú pháp literal là gì?

Giải thích cú pháp literal trong JavaScript:
Cú pháp literal trong JavaScript là cách khai báo trực tiếp giá trị của các đối tượng, mảng hoặc các kiểu dữ liệu khác. Thay vì phải sử dụng các hàm hay phương thức để tạo ra các đối tượng, bạn có thể khởi tạo chúng bằng cách sử dụng cú pháp ngắn gọn với dấu ngoặc vuông ([]) cho mảng hoặc dấu ngoặc nhọn ({}) cho đối tượng.

Cú pháp object literal:
Đối với đối tượng (object) trong JavaScript, cú pháp literal sử dụng cặp dấu ngoặc nhọn {}. Bên trong, các cặp khóa-giá trị được phân tách bởi dấu hai chấm (:), và mỗi cặp được ngăn cách bằng dấu phẩy. Đây là một cách đơn giản và dễ hiểu để khai báo đối tượng trong JavaScript.

Ví dụ về object literal trong JavaScript:

const person = {
  name: "John",
  age: 30,
  isStudent: false
};

Trong ví dụ trên:

• name, age, isStudent là các khóa (keys).

• "John", 30, false là các giá trị (values) tương ứng của các khóa.

JSON literal là gì?

JSON literal chính là object literal trong JavaScript, nhưng với một số quy tắc khác biệt. Cấu trúc dữ liệu trong JSON có một số quy định cần tuân thủ, như:

• Khóa (key) trong JSON phải được đặt trong dấu ngoặc kép.

• Các giá trị có thể là chuỗi (string), số (number), boolean, null, mảng hoặc đối tượng.

Ví dụ về JSON literal:

{
  "name": "John",
  "age": 30,
  "isStudent": false
}

So sánh Object Literal và JSON Literal:

• Object literal trong JavaScript có thể sử dụng các kiểu dữ liệu tự do, bao gồm cả hàm và biến, trong khi JSON literal không hỗ trợ các kiểu dữ liệu phức tạp như hàm hay undefined.

• JSON luôn yêu cầu khóa phải là chuỗi có dấu ngoặc kép, trong khi đó trong object literal, khóa có thể không cần dấu ngoặc kép (nếu là một từ khóa hợp lệ trong JavaScript).

Cách khai báo đối tượng JSON bằng cú pháp literal bằng JavaScript

Khai báo đối tượng JSON bằng cú pháp literal trong JavaScript là một cách đơn giản và trực quan để tạo ra các đối tượng có cấu trúc rõ ràng, dễ hiểu. JSON (JavaScript Object Notation) là một định dạng dữ liệu phổ biến và được sử dụng rộng rãi trong các ứng dụng web để lưu trữ và truyền tải dữ liệu.

Đối tượng đơn giản

Cấu trúc cơ bản:
Một đối tượng trong JSON được khai báo dưới dạng một cặp khóa-giá trị, nơi mỗi khóa phải là một chuỗi (string) được đặt trong dấu ngoặc kép (""), và mỗi giá trị có thể là một trong các kiểu dữ liệu sau: chuỗi (string), số (number), boolean, null, array hoặc object. Các cặp khóa-giá trị trong đối tượng được phân tách nhau bằng dấu phẩy.

Cú pháp:

{
  "key": value
}

Ví dụ về đối tượng JSON đơn giản:

{
  "name": "Alice",
  "age": 25,
  "isStudent": false,
  "score": null
}

Trong ví dụ trên:

• "name" là một chuỗi (string) với giá trị "Alice".

• "age" là một số nguyên (number) với giá trị 25.

• "isStudent" là một giá trị boolean (false).

• "score" có giá trị là null, thể hiện một giá trị trống hoặc không xác định.

Chú ý:

• Các khóa trong JSON luôn phải được đặt trong dấu ngoặc kép.

• Các giá trị có thể là nhiều kiểu dữ liệu khác nhau, bao gồm chuỗi, số, boolean, null, mảng hoặc đối tượng.

Đối tượng lồng nhau (Nested Object)

Đối tượng lồng nhau là khi một đối tượng JSON chứa các đối tượng khác bên trong nó. Việc sử dụng đối tượng lồng nhau giúp mô phỏng và biểu diễn các cấu trúc dữ liệu phức tạp, như thông tin chi tiết của người dùng, địa chỉ, hoặc các thông tin liên quan.

Cú pháp:

{
  "key": {
    "nestedKey": nestedValue
  }
}

{
  "person": {
    "name": "John",
    "age": 30,
    "address": {
      "street": "123 Main St",
      "city": "New York",
      "zip": "10001"
    }
  }
}

[
  { "key1": value1 },
  { "key2": value2 },
  { "key3": value3 }
]

[
  { "name": "Alice", "age": 25 },
  { "name": "Bob", "age": 30 },
  { "name": "Charlie", "age": 35 }
]

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

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

console.log(jsonObject.name);  // "Alice"
console.log(jsonObject.age);   // 25
console.log(jsonObject.isStudent);  // false

{
  "person": {
    "name": "John",
    "age": 30,
    "address": {
      "street": "123 Main St",
      "city": "New York",
      "zip": "10001"
    }
  }
}

const jsonObject = {
  "person": {
    "name": "John",
    "age": 30,
    "address": {
      "street": "123 Main St",
      "city": "New York",
      "zip": "10001"
    }
  }
};

console.log(jsonObject.person.name);  // "John"
console.log(jsonObject.person.age);   // 30
console.log(jsonObject.person.address.city);  // "New York"

[
  { "name": "Alice", "age": 25 },
  { "name": "Bob", "age": 30 },
  { "name": "Charlie", "age": 35 }
]

const jsonArray = [
  { "name": "Alice", "age": 25 },
  { "name": "Bob", "age": 30 },
  { "name": "Charlie", "age": 35 }
];

console.log(jsonArray[0].name);  // "Alice"
console.log(jsonArray[1].age);   // 30
console.log(jsonArray[2].name);  // "Charlie"

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

{
  name: "Alice",
  age: 25
}

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

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

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

{
  "theme": "dark",
  "language": "en",
  "notifications": true
}

{
  "username": "john_doe",
  "email": "[email protected]",
  "password": "securepassword123"
}

// Lưu trữ đối tượng vào LocalStorage
const user = {
  name: "Alice",
  age: 25
};
localStorage.setItem("user", JSON.stringify(user));

// Lấy đối tượng từ LocalStorage và chuyển lại thành object
const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name);  // "Alice"

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

{
  name: "Alice",
  age: 25
}

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

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

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

{
  "theme": "dark",
  "language": "en",
  "notifications": true
}

{
  "username": "john_doe",
  "email": "[email protected]",
  "password": "securepassword123"
}

// Lưu đối tượng vào localStorage
const user = {
  name: "Alice",
  age: 25
};
localStorage.setItem("user", JSON.stringify(user));

// Lấy đối tượng từ localStorage và chuyển lại thành object
const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name);  // "Alice"