JSON, viết tắt của JavaScript Object Notation, là một cách lưu trữ dữ liệu. Trong các đối tượng JSON, các giá trị được ánh xạ tới các nhãn được gọi là khóa. Các đối tượng JSON có thể lưu trữ bất kỳ kiểu dữ liệu nào, bao gồm chuỗi, số nguyên và các giá trị JSON khác.
JSON là một định dạng tệp tiêu chuẩn cho phép bạn lưu trữ và chia sẻ dữ liệu. Các ngôn ngữ lập trình như JavaScript, Python và PHP đều hỗ trợ thao tác và đọc dữ liệu JSON.
Trong hướng dẫn này, chúng ta sẽ khám phá cách sử dụng JavaScript JSON. Chúng ta sẽ khám phá những điều cơ bản về định dạng JSON và cách một đối tượng JSON so sánh với một đối tượng JavaScript.
JSON là gì?
JSON là một phương thức lưu trữ và chia sẻ dữ liệu. Nó dựa trên cú pháp đối tượng JavaScript. Sự khác biệt là JSON hoàn toàn dựa trên văn bản, trong khi các đối tượng thì không. JSON là viết tắt của JavaScript Object Notation.
Mặc dù JSON dựa trên các nguyên tắc từ ngôn ngữ lập trình JavaScript, nhưng nó được sử dụng trong nhiều ngôn ngữ khác như PHP, Java và Ruby.
Bạn có thể lưu trữ dữ liệu JSON dưới dạng tệp hoặc dưới dạng giá trị trong chương trình. Ví dụ:một chương trình có thể bao gồm một tệp có tên là mtg_cards.json nơi lưu trữ danh sách các thẻ Magic the Gathering. Chúng tôi có thể lưu trữ dữ liệu đó trong một biến JavaScript có tên là mtg_cards .
Đây là cấu trúc cho một phần dữ liệu được lưu trữ trong JSON:
{
"card_name": "Black Lotus",
"status": "banned",
"card_type": "Mono Artifact"
"mana": "0"
} JSON lưu trữ dữ liệu bằng cách sử dụng cấu trúc được gọi là cặp khóa-giá trị. Các cặp khóa-giá trị là các phần dữ liệu sử dụng cấu trúc sau:“key”:“value”.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình 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 công việc đầu tiên của họ.
card_name là một ví dụ về chìa khóa. Giá trị nằm ở phía bên phải của dấu hai chấm. Trong JSON, bạn lưu trữ tên khóa dưới dạng chuỗi, nhưng giá trị có thể là bất kỳ kiểu dữ liệu nào, chẳng hạn như boolean hoặc số nguyên.
JSON thường là các API để gửi dữ liệu. Ví dụ:giả sử bạn sử dụng các API của Airtable hoặc Fitbit. Bạn sẽ cần gửi dữ liệu và đọc dữ liệu ở định dạng dữ liệu JSON.
Cách truy cập dữ liệu JavaScript JSON
Để truy cập dữ liệu JSON trong JavaScript, bạn có thể sử dụng dấu ngoặc vuông hoặc ký hiệu dấu chấm. Ký hiệu dấu ngoặc vuông tương tự như cách bạn lấy một giá trị từ một mảng JavaScript. Thay vì chỉ định vị trí chỉ mục, bạn chỉ định tên của khóa có giá trị mà bạn muốn truy xuất.
Hãy xem xét đối tượng của chúng ta trước đó, bây giờ được định dạng là một đối tượng JSON:
var black_lotus = {
"card_name": "Black Lotus",
"status": "banned",
"card_type": "Mono Artifact",
"mana": "0"
} Trong ví dụ này, chúng tôi đã chỉ định đối tượng JSON của mình cho biến black_lotus . Giả sử bạn muốn tìm loại thẻ cho Black Lotus. Đây là một thẻ bị cấm trong trò chơi giao dịch thẻ bài Magic the Gathering .
Dấu ngoặc vuông
Sử dụng ký hiệu dấu ngoặc vuông, chúng ta có thể tìm ra loại thẻ của thẻ Black Lotus.
Để sử dụng ký hiệu này, chúng ta cần chỉ định tên của đối tượng mà chúng ta muốn lấy một giá trị từ đó. Sau đó, chúng tôi chỉ định tên của khóa được liên kết với giá trị đó. Bạn phải đặt tên khóa trong dấu ngoặc kép và dấu ngoặc vuông.
Đoạn mã sau truy xuất dữ liệu trên loại thẻ của Black Lotus:
console.log(black_lotus["card_type"])
Mã của chúng tôi trả về: Mono Artifact . Chúng tôi đã trích dẫn kép tên khóa của mình, bao quanh nó bởi dấu ngoặc vuông, sau đó chúng tôi nối nó vào cuối biến black_lotus. Điều này cho phép chúng tôi truy cập dữ liệu được lưu trữ với tên card_type .
Ký hiệu dấu chấm
Ký hiệu dấu chấm là nơi bạn truy cập một đối tượng bằng cách chỉ định tên đối tượng, theo sau là dấu chấm. Sau đó, bạn chỉ định tên của khóa có giá trị mà bạn muốn truy cập.
Để truy cập loại thẻ Black Lotus bằng ký hiệu dấu chấm, bạn có thể sử dụng mã này:
console.log(black_lotus.card_type)
Mã của chúng tôi trả về:“Mono Artifact”.
Chúng tôi đã chỉ định tên đối tượng của mình (“ black_lotus ”), Tiếp theo là khóa có giá trị mà chúng tôi muốn truy cập (“ card_type ”).
Chuyển đổi JSON
Thông thường, khi bạn đang làm việc với một đối tượng, bạn sẽ muốn chuyển đổi nó thành một chuỗi JSON hoặc ngược lại. Đây là thực tế phổ biến nếu bạn muốn gửi dữ liệu qua máy chủ web.
JSON dễ thao tác hơn trong các công nghệ như JavaScript. Sẽ rất khó để trích xuất tất cả các giá trị từ một chuỗi đơn giản.
Lúc đầu, bạn sẽ muốn chuyển đổi một đối tượng thành một chuỗi để bạn có thể gửi nó qua máy chủ. Sau đó, bạn sẽ muốn chuyển đổi nó trở lại thành một đối tượng để bạn có thể coi dữ liệu như một đối tượng.
Để chuyển đổi một đối tượng thành chuỗi JSON, bạn có thể sử dụng hàm JSON.stringify (). Giả sử chúng ta muốn chuyển đối tượng Black Lotus của chúng ta từ trước đó thành một chuỗi. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
var black_lotus = {
"card_name": "Black Lotus",
"status": "banned",
"card_type": "Mono Artifact",
"mana": "0"
}
var string_black_lotus = JSON.stringify(black_lotus)
console.log(string_black_lotus) Mã của chúng tôi trả về văn bản JSON sau:
“{“card_name”:”Black Lotus”,”status”:”banned”,”card_type”:”Mono Artifact”,”mana”:”0″}” Như bạn có thể thấy, dữ liệu JSON của chúng tôi là một chuỗi. Bạn có thể sử dụng phương thức JSON.parse () để chuyển đổi chuỗi này trở lại thành một đối tượng JSON:
var black_lotus_object = JSON.parse(string_black_lotus) console.log(black_lotus_object)
Mã này trả về:
{
"card_name": "Black Lotus",
"status": "banned",
"card_type": "Mono Artifact",
"mana": "0"
} Như bạn có thể thấy, dữ liệu của chúng tôi hiện là một đối tượng.
JSON và JavaScript Object
Ký hiệu JSON dựa trên các đối tượng JavaScript.
Vì JSON được thiết kế để hỗ trợ nhiều ngôn ngữ lập trình, nên nó không hoàn toàn giống với một đối tượng JavaScript. Ví dụ:JSON được hỗ trợ trong PHP và Python. Mỗi ngôn ngữ lập trình hỗ trợ JSON có cách triển khai duy nhất của riêng nó.
Trong khi các khóa trong các đối tượng JavaScript không được lưu trữ trong dấu ngoặc kép, các khóa trong dữ liệu JSON phải được lưu trữ trong dấu ngoặc kép.
Nếu bạn xem trong tệp JSON, bạn sẽ thấy tất cả các khóa được bao quanh trong dấu ngoặc kép. Nếu bạn nhìn vào một đối tượng JavaScript, bạn sẽ thấy các khóa có thể không được đặt trong dấu ngoặc kép.
Cả hai đối tượng JSON và JavaScript đều lưu trữ dữ liệu trong cấu trúc khóa-giá trị.
Kết luận
JavaScript hỗ trợ lưu trữ dữ liệu trong JSON. JSON, viết tắt của JavaScript Object Notation, là một cách để lưu trữ dữ liệu liên quan trong một đối tượng. Mỗi giá trị trong đối tượng có nhãn riêng của nó, còn được gọi là khóa.
Giờ đây, bạn đã được trang bị kiến thức cần thiết để sử dụng JSON trong JavaScript như một người chuyên nghiệp!
Bạn có muốn tìm hiểu thêm về JavaScript? Hãy xem hướng dẫn Cách học JavaScript của chúng tôi. Bạn sẽ tìm thấy các mẹo hàng đầu về cách học JavaScript và danh sách các tài nguyên học tập dành cho các nhà phát triển sơ cấp và trung cấp.