TÌM HIỂU VỀ JSON TRONG JAVASCRIPT

Cách đây khoảng 3 - 4 năm, khi đang học về lập trình Android, tôi đã bắt đầu được tiếp xúc với JSON. Gần đây, tôi mới biết nguồn gốc của nó lại liên quan đến JavaScript - khi tôi bắt đầu học ngôn ngữ này. Vậy JSON là gì? Nó có tác dụng gì ? Và cách sử dụng nó như thế nào? Sau đây, chúng ta sẽ cùng tìm hiểu.

Tổng quan

JSON viết tắt bởi JavaScript Object Notation. Dịch nôm na thì nó là "Kí hiệu object trong JavaScript".

{
 "type": "laptop",
 "brand": "Sony",
 "operating system": "Windows 7",
 "graphic card": "NVIDIA"
}

Nếu bạn đã biết về JavaScript Object thì bạn có thể thấy rằng ví dụ trên cũng chính là biểu diễn cho một Object trong JavaScript. Trong đó, gồm có hai thành phần:

  • keys: type, brand, operating system, graphic card
  • values: laptop, Sony, Windows 7, NVIDIA 

Áp dụng

JSON thường được dùng trong cơ sở dữ liệu NoSQL (ví dụ như MongoDB) và là một chuẩn giao tiếp trên web. Khi một client gửi request lên server thì server có thể gửi kết quả trả về dạng JSON (hoặc XML). Client bóc tách kết quả đó và dựa vào key để lấy ra thông tin cần thiết. Việc sử dụng JSON thay vì XML giúp giảm thời gian truy xuất dữ liệu và giảm dung lượng gói tin. Quay lại ví dụ trên, nếu tôi dùng XML để biểu diễn thì nó sẽ như sau:

<type> laptop </type>
<brand> Sony </brand>
<operatin_system> Windows 7 </operating_system>
<graphic_card> NVIDIA </graphic_card>

Rõ ràng, XML phức tạp hơn JSON ở chỗ là XML cần phải có 2 thành phần thẻ đóngthẻ mởđể xác định một thuộc tính. Trong khi JSON thì chỉ cần 1 thành phần là key.

So sánh với JavaScript Object

Mặc dù JSON rất giống JavaScript Object nhưng vẫn có một số giới hạn khác như:

  • Key: luôn luôn phải được đóng gói trong cặp dấu ngoặc kép, không phải ngoặc đơn, cũng không được phép là biến số (variable)
  • Value: Chỉ được phép là những dữ liệu cơ bản như numbers, strings, Boolean, array, object, null, không được phép là function, date, undefined hoặc là một biểu thức tính toán.

Vì vậy, tôi có thể gọi đây chính là phiên bản rút gọn của JavaScript Object.

Cách sử dụng

JavaScript cung cấp sẵn cho chúng ta hai hàm số là: JSON.stringifyJSON.parse:

  • JSON.stringify dùng để convert một JavaScript Object thành JSON string.
  • JSON.parse dùng để convert string biểu diễn JSON thành JavaScript Object.

Hãy xem ví dụ sau:

var string = JSON.stringify({name: "X", born: 1990});
console.log(string);
// => {"name":"X","born":1990}

var obj = JSON.parse(string);
console.log(obj.name);
// => X
console.log(obj.born);
// => 1990

Điều đó đồng nghĩa với việc nếu bạn muốn chỉnh sửa JSON thì có thể convert nó thành Object để sửa đổi các thuộc tính, giá trị. Sau đó convert JavaScript Object đó ngược lại thành JSON.

Kết luận

JSON là một thành phần quan trọng dùng để lưu trữ dữ liệu và là chuẩn giao tiếp giữa client và server. Hy vọng qua bài viết này bạn hiểu được JSON là gì và cách sử dụng nó. Vì chắc chắn là bạn sẽ phải sử dụng nó nhiều. Hẹn gặp lại bạn ở những bài viết sau trong series JavaScript cơ bản. Thân ái,

Tham khảo

Bản gốc: Blog Complete JavaScript
Facebook Fanpage: Complete JavaScript
Facebook Group: Hỏi đáp JavaScript VN

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Lam Pham

18 bài viết.
16 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
14 5
Trước khi vào nội dung bài viết. Tôi xin đính chính giúp anh trả lời những câu hỏi chỉ là tựa đề của một bài hát tôi không có ý xưng hô là anh. Bài...
Lam Pham viết 28 ngày trước
14 5
White
11 6
Có thể bạn thừa biết, JavaScript là một ngôn ngữ chạy (Link). Điều đó có nghĩa là nếu bạn thực hiện một tác vụ quá lớn trên giao diện chính thì khả...
Lam Pham viết 1 tháng trước
11 6
White
3 0
Nếu bạn theo dõi các bài viết của tôi từ đầu tới giờ thì có thể thấy tôi đã giới thiệu với các bạn về (Link), (Link) và (Link). Hôm nay, tôi sẽ tiế...
Lam Pham viết 1 tháng trước
3 0
Bài viết liên quan
White
3 0
Có bao giờ bạn thắc mắc, chuyện gì thực sự diễn ra khi chúng ta gõ một địa chỉ trang web (ví dụ: (Link)) lên trình duyệt và nhấn Enter? Đầu tiên, t...
Lam Pham viết 1 tháng trước
3 0
White
0 4
Từ xưa đến nay, sắp xếp giữ một vai trò vô cùng quan trọng. Nhiều ứng dụng (từ điển, danh bạ, quản lý tài khoản,…) thường có chức năng sắp xếp theo...
Lam Pham viết 1 tháng trước
0 4
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
18 bài viết.
16 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!