JSON là gì?

JSON là viết tắt của JavaScript Object Notation. Nó là đối tượng JavaScript tổ chức dữ liệu theo cặp khóa/giá trị. Lưu trữ dữ liệu theo cách này làm cho các đối tượng này nhẹ và độc lập ngôn ngữ. Nghĩa là JSON có thể đọc được bởi hầu hết ngôn ngữ lập trình.

JSON thường dùng để lấy dữ liệu từ server đến client vì nó nhẹ và dễ đọc bởi cả con người và máy móc. Trong thế giới tiêu thụ API, JSON đủ linh hoạt để trích xuất chỉ dữ liệu mong muốn từ server đến người dùng.

Sử dụng JSON

Dùng JSON là cách tiện lợi lưu dữ liệu truyền từ server đến front-end ứng dụng. Hầu hết ngôn ngữ lập trình có phương thức chuyển dữ liệu thành JSON sẵn sàng. Trong yêu cầu fetch JavaScript, phản hồi dữ liệu từ server chuyển thành JSON bằng cách gọi phương thức json() trên yêu cầu. Đọc thêm về yêu cầu fetch tại đây.

Tại sao muốn chuyển phản hồi thành JSON? Phản hồi gốc dài dòng và khó hiểu cho con người. Bằng cách chuyển phản hồi thành JSON, ta tổ chức dữ liệu thành cặp khóa/giá trị dễ đọc. Điều này làm dữ liệu dễ truy cập hơn qua mã ta viết để xử lý dữ liệu phản hồi.

Ví dụ JSON

Trước, xem phản hồi chuyển thành JSON trông như thế nào. Chúng ta gửi yêu cầu fetch đến API cho biết bao nhiêu phi hành gia hiện đang ở không gian.

fetch('https://api.open-notify.org/astros.json')
  .then(response => response.json())
  .then(data => console.log(data))

Với mục đích này, ta ghi phản hồi chuyển JSON ra console.

{
  "message": "success",
  "number": 7,
  "people": [
    { "craft": "ISS", "name": "Sergey Ryzhikov" },
    { "craft": "ISS", "name": "Kate Rubins" },
    { "craft": "ISS", "name": "Sergey Kud-Sverchkov" },
    { "craft": "ISS", "name": "Mike Hopkins" },
    { "craft": "ISS", "name": "Victor Glover" },
    { "craft": "ISS", "name": "Shannon Walker" },
    { "craft": "ISS", "name": "Soichi Noguchi" }
  ]
}

Ta thấy bên trong đối tượng có khóa "message", "number", và "people". Khóa message trỏ giá trị "success". Tin nhắn cho biết trạng thái yêu cầu.

Tiếp, khóa number trỏ giá trị 7. Đây là tổng số người ở không gian. Cuối, đến khóa "people". Giá trị khóa này là mảng. Bên trong mảng là đối tượng với khóa "craft" và "name". Giá trị cho khóa là tên tàu vũ trụ và phi hành gia trên tàu.

81% người tham gia cho biết họ cảm thấy tự tin hơn về cơ hội việc làm công nghệ sau khi tham gia bootcamp. Được ghép nối với bootcamp ngay hôm nay.

Sinh viên trung bình của bootcamp dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được việc đầu tiên.

JSON có thể lồng nhiều lớp. Ở giai đoạn này yêu cầu fetch, phản hồi đã chuyển JSON và bước tiếp theo là làm gì đó với dữ liệu. Từ đây, ta dùng dữ liệu điền hàng thẻ cho mỗi phi hành gia. Việc làm gì với dữ liệu phụ thuộc vào mục tiêu ứng dụng.

Kết luận

Tóm lại, ta học JSON là đối tượng lưu dữ liệu. Thường dữ liệu từ server như phản hồi trong yêu cầu fetch. Ta cũng học JavaScript có phương thức json() chuyển phản hồi thành JSON.

Để front-end ứng dụng dùng dữ liệu từ server, dữ liệu phải định dạng JSON. Sau chuyển phản hồi thành JSON, ta tự do xây dựng gì muốn quanh dữ liệu. Để đi sâu phương thức json() trong fetch, tham khảo hướng dẫn này.