Hướng dẫn json to html parser - json sang trình phân tích cú pháp html

Trong bài viết này, chúng ta sẽ cùng tìm hiểu những khía cạnh cơ bản về JSON. Chúng ta sẽ bắt đầu khám phá những gì liên quan đến nó, tìm hiểu chính xác nó là gì, nó được sử dụng làm gì và lí do chúng ta nên học JSON. Bắt đầu nào!Chúng ta sẽ bắt đầu khám phá những gì liên quan đến nó, tìm hiểu chính xác nó là gì, nó được sử dụng làm gì và lí do chúng ta nên học JSON. Bắt đầu nào!

JSON là gì?

JSON là từ viết tắt của JavaScript Object Notation - Có thể hiểu nôm na là "Kí hiệu Object trong Javascript".là từ viết tắt của JavaScript Object Notation - Có thể hiểu nôm na là "Kí hiệu Object trong Javascript".

JSON là một định dạng trao đổi dữ liệu chuẩn mở, nó là một ngôn ngữ độc lập và hỗ trợ các cấu trúc dữ liệu như mảng và đối tượng.là một định dạng trao đổi dữ liệu chuẩn mở, nó là một ngôn ngữ độc lập và hỗ trợ các cấu trúc dữ liệu như mảng và đối tượng.

Nếu bạn đã biết về Object Javascript thì ví dụ về JSON sau đây cũng chính là để biểu diễn cho một Object trong Js.JSON sau đây cũng chính là để biểu diễn cho một Object trong Js.

{
  "type": "laptop",
  "brand": "Asus",
  "operating system": "Windows 10 Pro",
  "graphic card": "NVIDIA"
}

Trong đó, gồm có 2 phần:

  • key: type, brand, operating system, graphic card.: type, brand, operating system, graphic card.
  • value: laptop, Asus, Windows 10 Pro, NVIDIA.: laptop, Asus, Windows 10 Pro, NVIDIA.

JSON được sử dụng làm gì?

JSON là một cú pháp để gửi, nhận và trao đổi dữ liệu.là một cú pháp để gửi, nhận và trao đổi dữ liệu.

1. Trao đổi dữ liệu

Khi trao đổi dữ liệu giữa trình duyệt và máy chủ, dữ liệu chỉ có thể là văn bản. JSON là văn bản, chúng ta có thể chuyển đổi bất kỳ đối tượng JavaScript nào thành JSON và gửi JSON đến máy chủ.JSON là văn bản, chúng ta có thể chuyển đổi bất kỳ đối tượng JavaScript nào thành JSON và gửi JSON đến máy chủ.

Chúng ta cũng có thể chuyển đổi bất kỳ JSON nào nhận được từ máy chủ thành các đối tượng JavaScript. Bằng cách này, chúng ta có thể làm việc với dữ liệu dưới dạng các đối tượng JavaScript mà không cần phân tích cú pháp và dịch phức tạp.JSON nào nhận được từ máy chủ thành các đối tượng JavaScript. Bằng cách này, chúng ta có thể làm việc với dữ liệu dưới dạng các đối tượng JavaScript mà không cần phân tích cú pháp và dịch phức tạp.

2. Gửi dữ liệu

Nếu bạn có dữ liệu được lưu trữ trong một đối tượng JavaScript, bạn có thể chuyển đổi đối tượng đó thành JSON và gửi nó đến máy chủ.JavaScript, bạn có thể chuyển đổi đối tượng đó thành JSON và gửi nó đến máy chủ.

Ví dụ:





Chuyển đổi đối tượng Javascript thành chuỗi JSON, và gửi nó đến máy chủ.

Kết quả nhận được:

Khoa from Da Nang is 19

Trong ví dụ trên, hàm 





Chuyển đổi đối tượng Javascript thành chuỗi JSON, và gửi nó đến máy chủ.

5 được dùng để chuyển đối tượng Javascript thành một chuỗi.




Chuyển đổi đối tượng Javascript thành chuỗi JSON, và gửi nó đến máy chủ.

5 được dùng để chuyển đối tượng Javascript thành một chuỗi.

3. Nhận dữ liệu

Nếu bạn nhận được dữ liệu ở định dạng JSON, bạn có thể chuyển đổi nó thành một đối tượng JavaScript.JSON, bạn có thể chuyển đổi nó thành một đối tượng JavaScript.

Ví dụ:





Convert a string written in JSON format, into a JavaScript object.

Kết quả nhận được:

Convert a string written in JSON format, into a JavaScript object

Khoa

Trong ví dụ trên, hàm 





Chuyển đổi đối tượng Javascript thành chuỗi JSON, và gửi nó đến máy chủ.

5 được dùng để chuyển đối tượng Javascript thành một chuỗi.




Chuyển đổi đối tượng Javascript thành chuỗi JSON, và gửi nó đến máy chủ.

6 dùng để tạo ra Object Javascript từ chuỗi JSON.

3. Nhận dữ liệu

Nếu bạn nhận được dữ liệu ở định dạng JSON, bạn có thể chuyển đổi nó thành một đối tượng JavaScript.JSON là một tập hợp con của cú pháp JavaScript.

Trong ví dụ trên, hàm 




Chuyển đổi đối tượng Javascript thành chuỗi JSON, và gửi nó đến máy chủ.

6 dùng để tạo ra Object Javascript từ chuỗi JSON.

  • Cú pháp JSON
  • Cú pháp JSON là một tập hợp con của cú pháp JavaScript.
  • Các quy tắc để viết cú pháp JSON:
  • Dữ liệu nằm trong các cặp tên/giá trị.

Ví dụ:

{
   "book": [
      {
         "id":"01",
         "name": "Nhà Giả Kim",
         "edition": "3",
         "author": "Paulo Coelho"
      },
      {
         "id":"02",
         "name": "Hướng Nội",
         "edition": "2",
         "author": "Susan Cain"
      }
   ]
}

Kết quả nhận được:

Trong ví dụ trên, hàm 





Chuyển đổi đối tượng Javascript thành chuỗi JSON, và gửi nó đến máy chủ.

5 được dùng để chuyển đối tượng Javascript thành một chuỗi.JSON được viết dưới dạng các cặp tên/giá trị.

3. Nhận dữ liệutên/giá trị bao gồm tên trường (trong dấu ngoặc kép), theo sau là dấu hai chấm, theo sau là giá trị:

"name":"Khoa"

Nếu bạn nhận được dữ liệu ở định dạng JSON, bạn có thể chuyển đổi nó thành một đối tượng JavaScript. Tên JSON bắt buộc phải đặt trong dấu ngoặc kép. Còn trong JavaScript thì không.

Trong ví dụ trên, hàm 




Chuyển đổi đối tượng Javascript thành chuỗi JSON, và gửi nó đến máy chủ.

6 dùng để tạo ra Object Javascript từ chuỗi JSON.

Cú pháp JSONJSON gần giống với các đối tượng JavaScript. Trong JSON, các khóa phải là chuỗi, được đặt trong dấu ngoặc kép:

Cú pháp JSON là một tập hợp con của cú pháp JavaScript.

// JSON
{ "name":"Khoa" }

Các quy tắc để viết cú pháp JSON:JavaScript, khóa có thể là chuỗi, số hoặc tên định danh:

//Javascript
{ name:"Khoa" }

Dữ liệu nằm trong các cặp tên/giá trị.

Dữ liệu được ngăn cách nhau bằng dấu phẩy.JSON, giá trị phải là một trong các kiểu dữ liệu sau:

  • Các đối tượng được đặt trong cặp dấu ngoặc nhọn.
  • Các mảng được đặt trong cặp dấu ngoặc vuông.
  • JSON Data - Tên và giá trị
  • Dữ liệu JSON được viết dưới dạng các cặp tên/giá trị.
  • boolean
  • null

Một cặp tên/giá trị bao gồm tên trường (trong dấu ngoặc kép), theo sau là dấu hai chấm, theo sau là giá trị:

Lưu ý: Tên JSON bắt buộc phải đặt trong dấu ngoặc kép. Còn trong JavaScript thì không.JSON phải được viết trong dấu ngoặc kép. Ví dụ:

{ "firstName":"John", "lastName":"Nguyen" }

So sánh với đối tượng trong Javascript

Định dạng JSON gần giống với các đối tượng JavaScript. Trong JSON, các khóa phải là chuỗi, được đặt trong dấu ngoặc kép:JSON phải là kiểu integer hoặc double - tương tự định dạng dấu phảy động trong JavaScript. Ví dụ:





Chuyển đổi đối tượng Javascript thành chuỗi JSON, và gửi nó đến máy chủ.

0

JSON

Trong JavaScript, khóa có thể là chuỗi, số hoặc tên định danh:JSON có thể là đối tượng, bao gồm một tập các cặp





Chuyển đổi đối tượng Javascript thành chuỗi JSON, và gửi nó đến máy chủ.

7. Ví dụ:





Chuyển đổi đối tượng Javascript thành chuỗi JSON, và gửi nó đến máy chủ.

1

Các kiểu dữ liệu trong JSON

Trong JSON, giá trị phải là một trong các kiểu dữ liệu sau:JSON có thể là mảng - một chuỗi các giá trị được sắp xếp. Ví dụ:





Chuyển đổi đối tượng Javascript thành chuỗi JSON, và gửi nó đến máy chủ.

2

string

numberJSON có thể là





Chuyển đổi đối tượng Javascript thành chuỗi JSON, và gửi nó đến máy chủ.

8. Ví dụ:





Chuyển đổi đối tượng Javascript thành chuỗi JSON, và gửi nó đến máy chủ.

3

object

arrayJSON có thể là giá trị rỗng. Ví dụ:





Chuyển đổi đối tượng Javascript thành chuỗi JSON, và gửi nó đến máy chủ.

4

1. String

Các chuỗi trong JSON phải được viết trong dấu ngoặc kép. Ví dụ:XML tiên phong trong lĩnh vực chuẩn hóa, mô tả dữ liệu, có thể nói XML là sự cách mạng trong việc định dạng và mô tả dữ liệu hiện nay, có khá nhiều ứng dụng sử dụng XML để lưu trữ, ngay như HTML cũng có phần “na ná” như XML hoặc sự ra đời XHTML là kết hợp của HTML viết theo cú pháp đúng chuẩn XML. XML có nhiều ưu điểm vậy, liệu JSON có là đối thủ ? Tất nhiên sự có mặt của JSON không hoàn toàn thay thế được với lão làng XML, nhưng trong một phạm vi nhỏ, những ứng dụng về ajax. Dưới đây, mình sẽ nêu ra 1 vài ưu điểm của JSON so với việc sử dụng XML theo quan điểm cá nhân:

  • 2. Number Trong hầu hết các trường hợp, biểu diễn JSON của một số dữ liệu sẽ nhỏ hơn đáng kể so với tuần tự hóa XML tương đương.
  • Các số trong JSON phải là kiểu integer hoặc double - tương tự định dạng dấu phảy động trong JavaScript. Ví dụ: Về mặt kỹ thuật, nó an toàn hơn XML. Do cách thức hoạt động của XML, việc phân tích cú pháp rất phức tạp và rất dễ sai, có thể dẫn đến hậu quả tai hại (được sử dụng vào các cuộc tấn công DoS). JSON đơn giản hơn nhiều và do đó dễ dàng phân tích cú pháp một cách an toàn.
  • 3. Object Ngày nay có nhiều ngôn ngữ có hỗ trợ JSON hơn cả XML. Sự đơn giản được đề cập ở trên cũng có nghĩa là JSON đủ dễ dàng để phân tích cú pháp mà bạn có thể thực hiện với ít tài nguyên hơn, khiến nó phù hợp hơn với các hệ thống có bộ nhớ hoặc sức mạnh xử lý rất hạn chế.
  • Không phân biệt giữa thẻ và thuộc tính: JSON không có khái niệm về thẻ, mọi thứ về mặt chức năng là một thuộc tính và các thuộc tính có thể có bất kỳ kiểu dữ liệu hợp lệ nào cho các giá trị của chúng, bao gồm các đối tượng và mảng. JSON không có khái niệm về thẻ, mọi thứ về mặt chức năng là một thuộc tính và các thuộc tính có thể có bất kỳ kiểu dữ liệu hợp lệ nào cho các giá trị của chúng, bao gồm các đối tượng và mảng.
  • Dễ đọc: JSON trông rất giống với cú pháp object/dictionary/map tiêu chuẩn từ nhiều ngôn ngữ lập trình được sử dụng rộng rãi. Do đó, hầu hết các lập trình viên có thể đọc nó một cách dễ dàng trong nháy mắt, ngay cả khi họ chưa bao giờ nhìn thấy nó trước đây. Còn XML trông không giống như các cấu trúc được sử dụng trong hầu hết các ngôn ngữ, vì vậy cần nhiều nỗ lực hơn để hiểu nó. JSON trông rất giống với cú pháp object/dictionary/map tiêu chuẩn từ nhiều ngôn ngữ lập trình được sử dụng rộng rãi. Do đó, hầu hết các lập trình viên có thể đọc nó một cách dễ dàng trong nháy mắt, ngay cả khi họ chưa bao giờ nhìn thấy nó trước đây. Còn XML trông không giống như các cấu trúc được sử dụng trong hầu hết các ngôn ngữ, vì vậy cần nhiều nỗ lực hơn để hiểu nó.

Tạm kết

Như vậy trong bài viết này, chúng ta đã cùng tìm hiểu về những vấn đề cơ bản của JSON. Nếu các bạn thấy bài viết hữu ích hãy rate 5* và share cho mọi người tham khảo! JSONNếu các bạn thấy bài viết hữu ích hãy rate 5* và share cho mọi người tham khảo!

Hãy để lại comment để mình có thể hoàn thiện bản thân hơn trong tương lai. Cám ơn các bạn!

Nguồn tham khảo:

  • W3SCHOOLS