Tệp JSON là gì? Ví dụ mã JavaScript


JSON là viết tắt của Ký hiệu đối tượng JavaScript. Tệp JSON có phần mở rộng là .json và dữ liệu bên trong được biểu diễn theo cặp khóa:giá trị, giống như một đối tượng JavaScript truyền thống.

Tuy nhiên, JSON và các đối tượng không hoàn toàn giống nhau. Sự khác biệt cốt lõi là khóa trong JSON phải nằm trong dấu ngoặc kép và các giá trị ngoài kiểu số và null cũng phải nằm trong dấu ngoặc kép.

Nếu bạn đã làm việc với các API trong hành trình lập trình của mình, thì bạn có thể biết JSON là gì, vì rất nhiều dữ liệu API hiện có ở định dạng JSON.

Nếu bạn chưa từng làm việc với API trước đây và hoàn toàn là người mới bắt đầu, thì bạn không đơn độc.

Trong bài viết này, tôi sẽ hướng dẫn bạn hiểu tất cả về JSON và cách bạn có thể tận dụng nó một cách tốt nhất.

Cú pháp JSON cơ bản

{
  "key1": "value1",
  "key2": "value2",
  "key3": "value3",
  "key4": 7,
  "key5": null,
  "favFriends": ["Kolade", "Nithya", "Dammy", "Jack"],
  "favPlayers": {"one": "Kante", "two": "Hazard", "three": "Didier"}
}

Các loại dữ liệu JSON được chấp nhận

JSON có thể được định nghĩa trong một đối tượng hoặc một mảng, có thể chứa một số đối tượng. Vì vậy, các đối tượng và mảng là các kiểu dữ liệu được chấp nhận tự động trong JSON. Các kiểu dữ liệu khác mà nó hỗ trợ là boolean, null và string.

Đọc thêm  JavaScript If-Else và If-Then – Câu lệnh có điều kiện trong JS

Các loại dữ liệu như không xác định, hàm và ngày không được JSON hỗ trợ.

Ngoài ra, JSON cũng có thể được mở rộng sang các định dạng dữ liệu khác có thể chấp nhận các loại dữ liệu bổ sung mà JSON thô không chấp nhận.

Ví dụ về các phần mở rộng như vậy là GeoJSON và BSON. GeoJSON được sử dụng để biểu diễn dữ liệu Địa lý trong khi BSON được sử dụng bởi nhà cung cấp dịch vụ cơ sở dữ liệu phổ biến MongoDB.

Ví dụ, BSON chấp nhận các biểu thức chính quy, ngày tháng và dấu thời gian làm kiểu dữ liệu mà JSON không chấp nhận.

Quy tắc cú pháp JSON

JSON rất nghiêm ngặt khi nói đến các loại dữ liệu được hỗ trợ. Nếu bạn đã cài đặt một kẻ nói dối trong trình chỉnh sửa mã của mình, nó sẽ ngay lập tức cho bạn biết có lỗi bất cứ khi nào bạn nhập một loại dữ liệu không được hỗ trợ hoặc đi ngược lại các quy tắc cú pháp.

Các quy tắc cú pháp JSON cần biết:

  • Tất cả dữ liệu trong tệp phải được bao quanh bởi dấu ngoặc nhọn nếu bạn biểu thị nó dưới dạng một đối tượng và trong dấu ngoặc vuông nếu đó là một mảng.
  • Dấu nháy đơn không được phép
  • Khóa trong mỗi JSON phải là duy nhất và phải nằm trong dấu ngoặc kép
  • Các số không được đặt trong dấu ngoặc kép, nếu không chúng sẽ được coi là chuỗi.
  • Kiểu dữ liệu null không được đặt trong dấu ngoặc kép.
  • Giá trị Boolean chỉ có thể đúng hoặc sai.
  • Mỗi cặp khóa:giá trị phải được kết thúc bằng dấu phẩy ngoại trừ mục cuối cùng
  • Một đối tượng cụ thể bên trong một mảng cũng phải được kết thúc bằng dấu phẩy.
Đọc thêm  JavaScript 数组完全手册

Cách dữ liệu JSON được gửi đến máy khách (Trình duyệt)

JSON được tạo ra do nhu cầu gửi dữ liệu từ máy chủ (ví dụ: cơ sở dữ liệu) đến máy khách (trình duyệt) trong thời gian thực.

Nhưng dữ liệu JSON không thể được truyền tới trình duyệt ở dạng cặp khóa:giá trị thô, vì vậy các ngôn ngữ lập trình có các phương pháp để thao tác dữ liệu JSON.

Ví dụ, trong JavaScript, JSON.parse() chuyển đổi dữ liệu JSON thành các đối tượng và JSON.stringify() chuyển đổi cặp khóa:giá trị của đối tượng thành dữ liệu JSON.

Python cung cấp các phương thức như json.loads() để chuyển đổi một chuỗi hiện có thành JSON và json.dumps() để chuyển đổi một đối tượng thành một chuỗi JSON.

Bạn có thể gửi dữ liệu theo cú pháp JSON cơ bản tới trình duyệt bằng cách sử dụng hai phương thức mà JavaScript cung cấp.

Cách gửi dữ liệu JSON đến máy khách (Trình duyệt) bằng JavaScript

Các JSON.stringify() phương thức trả về một chuỗi JSON hoàn toàn giống với một đối tượng JavaScript. Bạn có thể sử dụng nó kết hợp với các phương pháp thao tác DOM để hiển thị dữ liệu JSON trong trình duyệt, như tôi đã thực hiện trong đoạn mã bên dưới:

<h2>Here is the Data from the JSON:</h2> 
<div id="json"></div>
 const JSONData = {
    "key1": "value1",
    "key2": "value2",
    "key3": "value3",
    "key4": 7,
    "key5": null,
    "favFriends": ["Kolade", "Nithya", "Dammy", "Jack"],
    "favPlayers": {"one": "Kante", "two": "Hazard", "three": "Didier"}
}

const JSONString = JSON.stringify(JSONData)
const JSONDisplay = document.querySelector("#json")
JSONDisplay.innerHTML = JSONString

Trong mã JavaScript, chúng tôi đã khai báo dữ liệu JSON dưới dạng đối tượng bằng chữ với mã định danh (tên) JSONData. Chúng tôi đã sử dụng JavaScript JSON.stringify() để biến nó thành một chuỗi và phương thức bộ chọn truy vấn của DOM để lấy div trống trong HTML. Điều này giúp có thể điền dữ liệu JSON vào đó bằng innerHTML Phương pháp thao tác DOM.

Đọc thêm  JavaScript - Diễn đàn freeCodeCamp

phương thức json-stringify

Chúng ta có thể sử dụng JSON.parse() phương pháp để biến dữ liệu JSON thành một đối tượng – và đây là cách hoạt động:

<h2>Here is the Data from the JSON:</h2>
<div id="json"></div>
const JSONData="{"name": "Kolade", "favFriends": ["Kolade", "Nithya", "Rocco", "Jack"], "from": "Africa"}";

   try {
     const JSONString = JSON.parse(JSONData);
     const JSONDisplay = document.querySelector("#json");
     JSONDisplay.innerHTML = JSONString.name + ", [" + JSONString.favFriends + "], " + JSONString.from;
   } catch (error) {
     console.log("Cannot parse the JSON Data");
   }

Đầu ra kết quả trong trình duyệt trông như thế này:
phương thức phân tích cú pháp json

Phần kết luận

Là một lập trình viên, bạn không thể thiếu JSON. Hầu hết các API hiện được viết bằng JSON thay vì XML.

JSON ban đầu được dành cho JavaScript, nhưng rất nhiều ngôn ngữ lập trình khác hiện hỗ trợ nó nhờ vào bản chất độc lập với ngôn ngữ của nó. Kết quả là, nhiều ngôn ngữ có thư viện để làm việc với nó.

Tôi hy vọng hướng dẫn này đã cung cấp cho bạn thông tin chi tiết bạn cần để làm việc với JSON để bạn có thể đưa nó vào sử dụng đúng cách bất cứ khi nào bạn gặp nó.

Cảm ơn bạn đã đọc và tiếp tục mã hóa.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status