JSON Cơ Bản Cho Lập Trình Viên Front-End

Posted on by mtoplistChuyên mục:Top List

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!

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”.

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.

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.

{
  "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.
  • value: 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.

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ủ.

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.

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ủ.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

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

<script>
var myObj = { name: "Khoa", age: 19, city: "Da Nang" };
var myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
</script>

</body>
</html>

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

Khoa from Da Nang is 19

Trong ví dụ trên, hàm JSON.stringify() đượ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.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string written in JSON format, into a JavaScript object.</h2>

<p id="demo"></p>

<script>
var myJSON = '{"name":"Khoa", "age":19, "city":"Da Nang"}';
var myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>

</body>
</html>

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 JSON.parse() 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ị.

  • Dữ liệu được ngăn cách nhau bằng dấu phẩy.

  • 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.

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"
      }
   ]
}

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ị.

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ị:

"name":"Khoa"

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.

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

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

Trong JavaScript, khóa có thể là chuỗi, số hoặc tên định danh:

//Javascript
{ name:"Khoa" }

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:

  • string

  • number

  • object

  • array

  • boolean

  • null

1. String

Các chuỗi trong JSON phải được viết trong dấu ngoặc kép. Ví dụ:

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

2. Number

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ụ:

{ "age":19, "mark":100 }

3. Object

Giá trị trong JSON có thể là đối tượng, bao gồm một tập các cặp key/value. Ví dụ:

{
  "employee":
    { 
      "name":"Khoa", 
      "age":19, 
      "city":"Da Nang" 
    }
}

4. Array

Giá trị trong JSON có thể là mảng – một chuỗi các giá trị được sắp xếp. Ví dụ:

{
   "employees":[ "Khoa", "Van", "Hang" ]
}

5. Boolean

Giá trị trong JSON có thể là true/false. Ví dụ:

{ "sale":false }

6. null

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

{ "middlename":null }

Tại sao nên sử dụng JSON?

Như các bạn đã biết, công nghệ 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:

  • Nhỏ gọn: 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.

  • An toàn: 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.

  • Di động: 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.

  • 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ó.

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!

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:

mtoplist