07/09/2018, 14:55

JSON trong JavaScript

199JSON là một định dạng để lưu trữ và truyền dữ liệu. JSON thường được sử dụng khi dữ liệu được gửi từ một máy chủ đến một trang web. JSON là gì? JSON là viết tắt của JavaScript Object Notation JSON là định dạng trao đổi dữ liệu nhẹ JSON là ngôn ngữ độc ...

199JSON là một định dạng để lưu trữ và truyền dữ liệu. JSON thường được sử dụng khi dữ liệu được gửi từ một máy chủ đến một trang web.

JSON là gì?

  • JSON là viết tắt của JavaScript Object Notation
  • JSON là định dạng trao đổi dữ liệu nhẹ
  • JSON là ngôn ngữ độc lập *
  • JSON “tự mô tả” và dễ hiểu

* Cú pháp JSON xuất phát từ cú pháp ký hiệu đối tượng JavaScript, nhưng định dạng JSON chỉ là văn bản. Mã cho việc đọc và tạo dữ liệu JSON có thể được viết bằng bất kỳ ngôn ngữ lập trình nào.

Ví dụ về JSON

Cú pháp JSON này định nghĩa một đối tượng employees: một mảng gồm 3 bản ghi employees (đối tượng):

{
“employees”:[
{“firstName”:”John”, “lastName”:”Doe”},
{“firstName”:”Anna”, “lastName”:”Smith”},
{“firstName”:”Peter”, “lastName”:”Jones”}
]
}

Đánh giá định dạng JSON với đối tượng JavaScript

Định dạng JSON là cú pháp giống như mã cho việc tạo các đối tượng JavaScript. Do tính tương tự này, một chương trình JavaScript có thể dễ dàng chuyển đổi dữ liệu JSON thành các đối tượng JavaScript gốc.

Quy tắc cú pháp JSON

  • Dữ liệu nằm trong cặp tên / giá trị
  • Dữ liệu được phân cách bằng dấu phẩy
  • Đối tượng nằm trong dấu ngoặc nhọn
  • Mảng nằm trong dấu ngoặc vuông

Dữ liệu JSON – Tên và Giá trị

Dữ liệu JSON được viết như các cặp tên / giá trị, giống như thuộc tính đối tượng JavaScript. Một cặp tên / giá trị bao gồm một tên trường (trong ngoặc kép), tiếp theo là dấu hai chấm, theo sau là một giá trị:

“firstName”:”John”

Tên JSON yêu cầu dấu nháy kép. Tên JavaScript thì không.

Đối tượng JSON

Đối tượng JSON được viết bên trong dấu ngoặc nhọn. Cũng giống như trong JavaScript, các đối tượng có thể chứa nhiều cặp tên / giá trị:

{“firstName”:”John”, “lastName”:”Doe”}

Mảng JSON

Các mảng JSON được viết bên trong dấu ngoặc vuông. Cũng giống như trong JavaScript, một mảng có thể chứa các đối tượng:

“employees”:[
{“firstName”:”John”, “lastName”:”Doe”},
{“firstName”:”Anna”, “lastName”:”Smith”},
{“firstName”:”Peter”, “lastName”:”Jones”}
]

Trong ví dụ trên, đối tượng “nhân viên” là một mảng. Nó chứa ba đối tượng. Mỗi đối tượng là một bản ghi của một người (có tên và họ).

Chuyển văn bản JSON sang đối tượng JavaScript

Việc sử dụng JSON phổ biến là đọc dữ liệu từ máy chủ web và hiển thị dữ liệu trong một trang web. Để đơn giản, điều này có thể được chứng minh bằng cách sử dụng một chuỗi như dữ liệu nhập vào.

Đầu tiên, tạo một chuỗi JavaScript chứa cú pháp JSON:

var text = ‘{ “employees” : [‘ +
‘{ “firstName”:”John” , “lastName”:”Doe” },’ +
‘{ “firstName”:”Anna” , “lastName”:”Smith” },’ +
‘{ “firstName”:”Peter” , “lastName”:”Jones” } ]}’;

Sau đó, sử dụng hàm JavaScript tích hợp JSON.parse() để chuyển đổi chuỗi thành một đối tượng JavaScript:

var obj = JSON.parse(text);

Cuối cùng, sử dụng đối tượng JavaScript mới trong trang của bạn:

<p id=”demo”></p>

<script>
document.getElementById(“demo”).innerHTML =
obj.employees[1].firstName + ” ” + obj.employees[1].lastName;
</script>

Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • Học lập trình front-end cơ bản với bootstrap 4/html5/css3
  • Học lập trình front-end nâng cao qua Project thực tế
  • Học thiết kế web với Photoshop, CSS theo kiểu SASS
  • Học cách sử dụng Git_hub cho lập trình viên
  • Học lập trình Back-end PHP theo mô hình MVC cơ bản
  • Học lập trình Back-end PHP theo mô hình MVC nâng cao
  • Học lập trình Cơ sở dữ liệu với AngularJS
  • Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
  • Combo lập trình front-end từ cơ bản – nâng cao
  • Combo lập trình back-end từ cơ bản đến nâng cao
  • Combo lập trình web với word press từ A-Z
0