JSON: JSON.parse()


Đăng ký nhận thông báo về những video mới nhất

Cách sử dụng phổ biến của JSON là trao đổi dữ liệu đến/từ máy chủ web.

Khi nhận dữ liệu 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 cú pháp JSON

Hãy tưởng tượng chúng ta 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 ở định dạng JSON, nếu không bạn sẽ gặp lỗi cú pháp.

Giờ ta sử dụng đối tượng JavaScript:

<!DOCTYPE html>
<html>
<body>

<h2>Tạo đối tượng JavaScript từ chuỗi JSON</h2>

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

<script>
  var txt = '{"name":"John", "age":30, "city":"New York"}'
  var obj = JSON.parse(txt);
  document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>

</body>
</html>

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 yêu cầu AJAX.

Miễn là phản hồi từ máy chủ được viết ở định dạng JSON, bạn có thể phân tích cú pháp chuỗi thành một đối tượng JavaScript.

Lưu ý là ta phải chạy chương trình trên server (XAMPP chẳng hạn).

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h2>Dùng XMLHttpRequest để lấy nội dung file.</h2>
<p>Nội dung được ghi theo định dạng JSON, và có thể dễ dàng được chuyển thành đối tượng JavaScript.</p>

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

<script>
  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();
</script>

<p>Xem nội dung file <a href="json_demo.txt" target="_blank">json_demo.txt</a></p>

</body>
</html>

File json_demo.txt có nội dung sau:

{
"name":"John",
"age":31,
"pets":[
{ "animal":"dog", "name":"Fido" },
{ "animal":"cat", "name":"Felix" },
{ "animal":"hamster", "name":"Lightning" }
]
}

Mảng dưới dạng JSON

Khi sử dụng JSON.parse() trên JSON bắt nguồn 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.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h2>Nội dung dưới dạng mảng.</h2>
<p>Nội dung được thể hiện dưới dạng mảng JSON sẽ được chuyển thành mảng JavaScript.</p>

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

<script>
  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();
</script>

<p>Xem nội dung file <a href="json_demo_array.txt" target="_blank">json_demo_array.txt</a></p>

</body>
</html>

File json_demo_array.txt có nội dung:

[ "Ford", "BMW", "Audi", "Fiat" ]

Ngoại lệ

Phân tích cú pháp Date

Đối tượng Date không được phép trong JSON.

Nếu bạn cần có ngày tháng, hãy viết nó dưới dạng 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ư ví dụ sau:

<!DOCTYPE html>
<html>
<body>

<h2>Chuyển một chuỗi thành đối tượng date.</h2>

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

<script>
  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; 
</script>

</body>
</html>

Hoặc, bạn có thể sử dụng tham số thứ hai của hàm JSON.parse(), được gọi là reviver.

Tham số reviver là một hàm kiểm tra từng thuộc tính, trước khi trả về giá trị.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h2>Chuyển một chuỗi thành đối tượng date.</h2>

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

<script>
  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; 
</script>

</body>
</html>

Phân tích cú pháp Function

Hàm không được phép sử dụng trong JSON.

Nếu bạn cần bao gồm một hàm, hãy viết nó dưới dạng chuỗi.

Bạn có thể chuyển đổi nó trở lại thành một hàm sau này.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h2>Chuyển một chuỗi thành hàm.</h2>

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

<script>
  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(); 
</script>

</body>
</html>

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

Hỗ trợ trình duyệt

Hàm JSON.parse() được sử dụng trong tất cả các trình duyệt chính và trong các tiêu chuẩn mới nhất ECMAScript (JavaScript).

Các thông số trong bảng dưới đây chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ hàm JSON.parse():

Chrome Edge FireFox Safari Opera
Yes 8.0 3.5 4.0 10.0

Đối với các trình duyệt cũ hơn, thư viện JavaScript có sẵn tại https://github.com/douglascrockford/JSON-js.


Nếu bạn có điều thắc mắc, bạn hãy comment cho V1Study để được giải đáp.
Bài viết này được chia sẻ bởi LongDT. Nếu bạn muốn chia sẻ bài viết, bạn hãy Đăng ký làm thành viên!
« Prev
Next »
Copied !!!