Hiểu và sử dụng JSON trong 10 phút

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

JSON được viết tắt theo câu tiếng anh là JavaScript Object Notation, nó được dùng để truyền tải dữ liệu giữa server và client, và nó có chức năng tương tự như XML. JSON được lưu trữ với phần đuôi mở rộng là .json .Vậy thì tại sao nó lại ra đời ? Khi mà nó giống như XML, và khả năng của nó thực sự tới đâu. Chúng ta hãy cùng nhau so sánh và tìm hiểu cách sử dụng nó ra sao.

Hiểu và sử dụng JSON trong 10 phút

Đầu tiên, chúng ta sẽ xem JSON data sẽ như thế nào qua ví dụ sau đây.

Kiểu OBJECT

var chaitanya = {
   "firstName" : "Chaitanya",
   "lastName" : "Singh",
   "age" :  "28"
};

Kiểu OBJECT IN ARRAY

var students = [{
   "name" : "Steve",
   "age" :  "29",
   "gender" : "male"

},
{
   "name" : "Peter",
   "age" : "32",
   "gender" : "male"

},
{
   "name" : "Sophie",
   "age" : "27",
   "gender" : "female"
}];

Kiểu NEST OBJECT

var students = {
  "steve" : {
  "name" : "Steve",
  "age" :  "29",
  "gender" : "male" 
},

"pete" : {
  "name" : "Peter",
  "age" : "32",
  "gender" : "male"
},

"sop" : {
  "name" : "Sophie",
  "age" : "27",
  "gender" : "female"
}
}

Như các bạn thấy, nó cũng giống như kiểu lưu trữ dữ liệu thông thường bao gồm cặp { “key”:”value” } quen thuộc. Giá trị key trong JSON có thể là chuỗi (string), số (numner), rỗng (null), mảng (array), hoặc đối tượng (object).

JSON vs. XML

Bây giờ chúng ta sẽ cùng xem cách mà JSON và XML lưu trữ thông tin của 4 sinh viên như sau.

Kiểu JSON

{"students":[
   {"name":"John", "age":"23", "city":"Agra"},
   {"name":"Steve", "age":"28", "city":"Delhi"},
   {"name":"Peter", "age":"32", "city":"Chennai"},
   {"name":"Chaitanya", "age":"28", "city":"Bangalore"}
]}

Kiểu XML

<students>
  <student>
    <name>John</name> <age>23</age> <city>Agra</city>
  </student>
  <student>
    <name>Steve</name> <age>28</age> <city>Delhi</city>
  </student>
  <student>
    <name>Peter</name> <age>32</age> <city>Chennai</city>
  </student>
  <student>
    <name>Chaitanya</name> <age>28</age> <city>Bangalore</city>
  </student>
</students>

Nhìn vào đọan code bên trên, chúng ta thấy JSON đọc dễ hiểu và viết ngắn hơn so với XML, điều đó có nghĩa là nó nhẹ hơn XML. Điều khác biệt nữa là JSON có thể lưu trữ dữ liệu dưới dạng mảng (array) còn XML thì không.

JSON vs. Javascript

Chúng ta cùng xem xét một vài ví dụ về cách truy xuất dữ liệu JSON  bằng javascript. Giả sử chúng ta có một biến data chứa chuỗi dữ liệu JASON như sau:

var data = '[ { "name": "Aragorn", "race": "Human" }, { "name": "Gimli", "race": "Dwarf" } ]';

Bây giờ chúng ta sẽ sử dụng hàm JSON.parse() để mã hoá chuỗi.

data = JSON.parse(data);

Từ đây chúng ta có thể truy xuất dữ liệu như sau :

console.log(data[1].name);

Kết quả hiển thị  là ” Gimli “.

Ngoài ra , chúng ta còn có thể sử dụng vòng lặp như sau :

for (var i = 0; i &lt; data.length; i++) {
	console.log(data[i].name + ' is a ' + data[i].race + '.');
}

Kết quả :

Aragorn is a Human.
Gimli is a Dwarf.

Chúng ta cũng có thể truy xuất JSON từ URL, các bạn tạo một file đặt tên là data,json và copy đoạn code bên trong dán vào nó.

[
	{
		"name": "Aragorn",
		"race": "Human"
	},
	{
		"name": "Gimli",
		"race": "Dwarf"
	}
]

Và đoạn javascript bên dưới sẽ lấy và hiển thị dữ liệu từ file này như sau :

var request = new XMLHttpRequest();

request.open('GET', 'data.json', true);

request.onload = function () {
	// begin accessing JSON data here
	var data = JSON.parse(this.response);

	for (var i = 0; i &lt; data.length; i++) {
		console.log(data[i].name + ' is a ' + data[i].race + '.');
	}
}

request.send();

Kết quả hiển thị :

Aragorn is a Human.
Gimli is a Dwarf.

JSON vs JQuery

Cũng giống như javacript, các bạn có thể lấy thông tin dữ liệu  JSON thông qua ajax như sau :

$(document).ready(function () {
		var data;
		$.ajax({
			dataType: "json",
			url: 'data.json',
			data: data,
			success: function (data) {
				// begin accessing JSON data here
				console.log(data[0].name);
			}
		});
	});

JSON vs PHP

Các bạn cũng có thể tạo chuỗi dữ liệu JSON và lưu trữ vào biến trong PHP như sau :

$data = '{
	"name": "Aragorn",
	"race": "Human"
}';

Sau đó, chúng ta sẽ sử dụng hàm json_decode() để chuyển đổi chuỗi JSON thành đối tượng (object) trong PHP.

$character = json_decode($data);

Và bây giờ, các bạn có thể truy xuất dữ liệu theo kiểu hướng đối tượng như sau :

echo $character->name; // hien thi : Aragorn

Tương tự như jQuery, chúng ta truy xuất dữ liệu từ URL như sau :

<?php $url = 'data.json'; // đường dẫn đến JSON file 
$data = file_get_contents($url); // lấy nội dung và gán vào biến data 
$characters = json_decode($data); // giải mã JSON feed 
echo $characters[0]->name;

foreach ($characters as $character) {
	echo $character->name . '
';
}

Kết quả :

Aragorn
Legolas
Gimli

Nếu thích thì có thể đặt nó bên trong bảng (table) như sau :

<table>
	<tbody>
		<tr>
			<th>Name</th>
			<th>Race</th>
		</tr>
			<?php	
			foreach ($characters as $character) {
				echo '<tr>';
				echo '<td>' . $character->name . '</td>';
				echo '<td>' . $character->race . '</td>';
				echo '</tr>';
			}
			?>
	</tbody>
</table>

json

Một cách khác để truy xuất dữ liệu là đưa nó vào dưới dạng mảng, các bạn chỉ cần thêm giá trị true vào làm tham số trong hàm json_decode() là được. Ví dụ như sau:

$characters = json_decode($data, true); // giai ma JSON va dua no vao mang

và truy xuất dữ liệu thì sử dụng như sau :

echo $characters[0]['race'];

hoặc trong vòng lặp :

foreach ($characters as $character) {
	echo $character['race'] . '<br>';
}

Lấy dữ liệu từ kiểu NEST OBEJCT

Trong ví dụ này, chúng ta tạo một file mới, đặt tên là wizards.json và copy đoạn code bên dứoi rồi dán vào nó.

[
	{
		"name": "Harry Potter",
		"wand": [
			{
				"core": "phoenix feather",
				"length": "11 inches",
				"wood": "holly"
			}
		]
	},
	{
		"name": "Hermione Granger",
		"wand": [
			{
				"core": "dragon heartstring",
				"length": "10 and 3/4 inches",
				"wood": "vine"
			}
		]
	}
]

giải mã dữ liệu.

$url = 'wizards.json'; 
$data = file_get_contents($url); 
$wizards = json_decode($data, true);

rồi hiển thị nó như vòng lặp bên dưới.

foreach ($wizards as $wizard) {
	echo $wizard['name'] . '\'s wand is ' . 
	     $wizard['wand'][0]['wood'] . ', ' . 
	     $wizard['wand'][0]['length'] . ', with a ' . 
	     $wizard['wand'][0]['core'] . ' core. <br>' ;
}

Kết quả hiển thị :

Harry Potter's wand is holly, 11 inches, with a phoenix feather core. 
Hermione Granger's wand is vine, 10 and 3/4 inches, with a dragon heartstring core.

Chuyển đổi mảng, hoặc đối tượng trong PHP thành chuõi JSON

Chúng ta sử dụng json_decode() để giải mã JSON trong PHP, thì chúng ta cũng có thể sử dụng json_encode() để mã hoá và lưu nó vào trong cơ sở dữ liệu.

$data = [
	'name' => 'Aragorn',
	'race' => 'Human'
];

echo json_encode($data);

Sau khi mã hoá, kết quả nhận được.

{"name":"Aragorn","race":"Human"}

Có lẽ đã đủ 10 phút rồi phải không các bạn, đôi khi có những cái mình giải thích không rõ hoặc chưa rõ lời, thì bạn nào nếu biết được thì giải thích thêm cho mình và mọi người cùng tham khảo nhé. Chúc mọi người cuối tuần vui vẻ bên gia đình và bạn bè.

Chuyên Mục: Kiến thức web

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !

Chia sẻ cho bạn bè

Tweet

mtoplist