07/09/2018, 15:22

Tìm hiểu hàm JSON.parse() trong JSON

Một ứng dụng phổ biến của JSON là trao đổi dữ liệu đến / từ một máy chủ web. Khi nhận dữ liệu từ một máy chủ web, dữ liệu luôn là một chuỗi. Phân tích cú pháp dữ liệu với JSON.parse(), và dữ liệu trở thành một đối tượng JavaScript. Ví dụ – Phân tích JSON Giả dụ ...

Một ứng dụng phổ biến của JSON là trao đổi dữ liệu đến / từ một máy chủ web. Khi nhận dữ liệu từ một máy chủ web, dữ liệu luôn là một chuỗi. Phân tích cú pháp dữ liệu với JSON.parse(), và dữ liệu trở thành một đối tượng JavaScript.

Ví dụ – Phân tích JSON

Giả dụ bạn nhận được văn bản này từ một máy chủ web:

‘{ “name”:”John”, “age”:30, “city”:”New York”}’

Sử dụng hàm JavaScript JSON.parse() để chuyển đổi văn bản thành một đối tượng JavaScript:

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');

Đảm bảo văn bản được viết bằng định dạng JSON, nếu không lỗi cú pháp sẽ xuất hiện.

Sử dụng đối tượng JavaScript trong trang của bạn:

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

<script>
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age; 
</script>

JSON từ máy chủ

Bạn có thể yêu cầu JSON từ máy chủ bằng cách sử dụng một yêu cầu AJAX. Miễn là phản hồi từ máy chủ được viết bằng định dạng JSON, bạn có thể phân tích chuỗi thành một đối tượng JavaScript.

Sử dụng XMLHttpRequest để lấy dữ liệu từ máy chủ:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();

Mảng như JSON

Khi sử dụng JSON.parse() trên một JSON có nguồn gốc từ một mảng, phương thức sẽ trả về một mảng JavaScript, thay vì một đối tượng JavaScript.

JSON trả về từ máy chủ là một mảng:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myArr = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myArr[0];
    }
};
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();

Một số trường hợp ngoại lệ

Phân tích Ngày tháng

Các đối tượng ngày tháng không được phép trong JSON. Nếu bạn cần đưa vào một ngày, viết nó như một chuỗi. Bạn có thể chuyển đổi nó trở lại thành một đối tượng ngày tháng như sau:

var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);

document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Hoặc, bạn có thể sử dụng tham số thứ hai của hàm JSON.parse(), được gọi là reviver. Thông số reviver là một hàm kiểm tra mỗi thuộc tính, trước khi trả lại giá trị.

Chuyển đổi một chuỗi thành một ngày tháng, sử dụng hàm reviver:

var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text, function (key, value) {
    if (key == "birth") {
        return new Date(value);
    } else {
        return value;
    }});

document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Các hàm phân tích cú pháp

Hàm không được phép dùng trong JSON. Nếu bạn cần sử dụng một hàm, viết nó như một chuỗi. Bạn có thể chuyển đổi nó trở lại vào một hàm sau:

var text = '{ "name":"John", "age":"function () {return 30;}", "city":"New York"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");

document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();

Bạn nên tránh sử dụng các hàm trong JSON, các hàm sẽ bị mất phạm vi của chúng, và bạn sẽ phải sử dụng eval() để chuyển chúng trở lại các hàm.

Trình duyệt hỗ trợ

Hàm JSON.parse() tương thích trong tất cả các trình duyệt chính và theo tiêu chuẩn ECMAScript (JavaScript) mới nhất:

  • Firefox 3.5
  • Internet Explorer 8
  • Chrome
  • Opera 10
  • Safari 4
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
Bài liên quan

Tìm hiểu hàm Function Header trong PHP

header() dùng để gửi 1 HTTP header thô tới trình duyệt. HTTP headers được mô tả chi tiết trong HTTP/1.1 (PHP 4, PHP 5) header — Send a raw HTTP header Description void header ( string $string [, bool $replace = true ...

Trần Trung Dũng viết 18:08 ngày 02/10/2018

Tìm hiểu hàm JSON.stringify() trong JSON

Một ứng dụng phổ biến của JSON là trao đổi dữ liệu đến / từ một máy chủ web. Khi gửi dữ liệu đến một máy chủ web, dữ liệu phải là một chuỗi. Chuyển đổi một đối tượng JavaScript thành một chuỗi với JSON.stringify(). Chuyển đổi một đối tượng JavaScript Giả sử ...

Tạ Quốc Bảo viết 15:26 ngày 07/09/2018

Tìm hiểu hàm JSON.parse() trong JSON

Một ứng dụng phổ biến của JSON là trao đổi dữ liệu đến / từ một máy chủ web. Khi nhận dữ liệu từ một máy chủ web, dữ liệu luôn là một chuỗi. Phân tích cú pháp dữ liệu với JSON.parse(), và dữ liệu trở thành một đối tượng JavaScript. Ví dụ – Phân tích JSON Giả dụ ...

Bùi Văn Nam viết 15:22 ngày 07/09/2018

Tìm hiểu hàm removeEventListener() trong Javascript

Tìm hiểu đối tượng this trong Javascript Bài tập – xây dựng menu dropdown trong Javascript Tìm hiểu sự kiện onload trong Javascript Biến toàn cục và biến cục bộ trong Javascript Hàm removeEventListener() trong Javascript có tác dụng xóa đi một hành động cho một sự kiện được mình ...

Vũ Văn Thanh viết 16:55 ngày 04/09/2018

Tìm hiểu hàm enumerate() trong python (translated)

Bài viết sẽ trình bày việc làm như nào và tại sao sử dụng hàm enumerate trong python sẽ làm các vòng lặp python trở nên rõ ràng hơn. Hàm enumerate của python thực sực có rất nhiều sức mạnh, thật khó để tổng kết sự hữu ích của nó trong một câu. Có rất nhiều những feature hữu ích của hàm, mà ...

Trịnh Tiến Mạnh viết 18:21 ngày 12/08/2018
0