JSON là gì? sử dụng JSON như thế nào?

Trong bài viết này, chúng ta sẽ tìm hiểu về JSON thông qua các ví dụ nhé.

JSON là gì?

JSON là viết tắt của Javascript Object Notation. JSON là một text-based được sử dụng để lưu trữ và truyền dữ liệu.

Ví dụ:

// JSON syntax
{
    "name": "homiedev.com",
    "url": "https://homiedev.com/",
}

Trong JSON, dữ liệu nằm trong các cặp key/value và được phân tách bằng dấu phẩy ,.

JSON bắt nguồn từ JavaScript. Vì vậy, cú pháp JSON giống với cú pháp của object trong JavaScript. Tuy nhiên, định dạng JSON (JSON format) cũng có thể sử dụng và tạo bởi các ngôn ngữ lập trình khác.

Object JavaScript và JSON không giống nhau. Chúng ta sẽ tìm hiểu về sự khác biệt của chúng ở phần sau nhé.

JSON Data

Dữ liệu trong JSON bao gồm các key/value tương tự như các thuộc tính của object trong JavaScript (JavaScript object properties). Key và value được viết trong dấu ngoặc kép " ", cách nhau bằng dấu hai chấm :.

Ví dụ:

// JSON data
"blog": "homiedev"

JSON yêu cầu dấu ngoặc kép cho các key.

JSON Object

JSON Object được viết bên trong dấu ngoặc nhọn {}. JSON Object có thể chứa nhiều cặp key/value.

Ví dụ:

// JSON object
{ "name": "Trang", "age": 22 }

JSON Array

JSON Array được viết bên trong dấu ngoặc vuông [].

Ví dụ:

// JSON array
[ "JavaScript", "TypeScript", "ReactJS"]

// JSON array chứa object
[
    { "name": "Minh", "age": 22 },
    { "name": "Thanh", "age": 20 }.
    { "name": "Vy", "age": 23 }
]

JSON data có thể chứa objects và arrays. Tuy nhiên, không giống như object trong JavaScript, JSON data không thể chứa các function dưới dạng giá trị (value).

Sử dụng JSON Data

Bạn có thể sử dụng JSON Data bằng cách sử dụng dot notation.

Ví dụ:

// JSON object
const data = {
    "name": "homiedev.com",
    "categories" : ["JavaScript", "GatsbyJS", "CSS", "ReactJS"]
}

// sử dụng JSON object
console.log(data.name); // homiedev.com
console.log(data.categories[0]); // JavaScript

Chúng ta sử dụng . (dot notation) để lấy dữ liệu trong JSON. Cú pháp của nó là: variableName.key

Bạn cũng có thể sử dụng cú pháp dấu ngoặc vuông [] (bracket syntax) để lấy dữ liệu JSON.

Ví dụ:

// JSON object
const data = {
    "name": "Long",
    "age": 22
}

console.log(data["name"]); // Long

JavaScript Objects vs JSON

Mặc dù cú pháp của JSON tương tự như object JavaScript, nhưng JSON khác với các object JavaScript.

Chuyển đổi JSON thành JavaScript Object

Bạn có thể chuyển đổi dữ liệu của JSON sang object trong JavaScript bằng cách sử dụng hàm built-in JSON.parse().

Ví dụ:

// json object
const jsonData = '{ "name": "homiedev", "built": "GatsbyJS" }';

// chuyển thành object
const obj = JSON.parse(jsonData);

// sử dụng
console.log(obj.name); // homiedev

Chuyển đổi JavaScript Object thành JSON

Bạn cũng có thể chuyển đổi object trong JavaScript sang định dạng JSON bằng cách sử dụng hàm built-in JSON.stringify() trong JavaScript.

Ví dụ:

// object
const jsonData = { "name": "Thanh", "age": 22 };

// chuyển sang JSON
const obj = JSON.stringify(jsonData);

console.log(typeof obj, obj); // string {"name":"Thanh","age":22}

JSON là định dạng được sử dụng phổ biến nhất để trao đổi dữ liệu từ máy chủ (server) đến máy khách (client) và ngược lại. JSON Data rất dễ sử dụng. Thao tác dữ liệu JSON khá nhanh vì chúng chỉ chứa văn bản.

Chúng ta cũng có thể tạo và sử dụng JSON trong các ngôn ngữ lập trình khác.

JSON có thể được lưu trữ trong tệp riêng của nó, về cơ bản thì nó chỉ là một text file có phần mở rộng là .json và MIME type là application/json.

MIME type hiểu đơn giản là nó cho phép trình duyệt nhận ra loại tệp (filetype) của file. Ví dụ: MIME type của JSON text là application/json giúp cho trình duyệt biết rằng nó đã nhận được một file JSON. Dựa trên kiểu MIME này, trình duyệt có thể phân tích cú pháp và hiển thị dữ liệu JSON đã nhận một cách chính xác.

Đây là một ví dụ về file JSON các bạn có thể tải về xem nhé:

JSON example

⚡ Mình có làm một bài viết về cách đọc file JSON từ local, các bạn có thể đọc tại: Làm việc với JSON - lấy dữ liệu file JSON từ local.

Một số bài viết nên đọc:

1. Hướng dẫn fetch API với project random Person Card API
2. Tạo slide nhanh chóng và đẹp mắt với jquery slick slider