tek4

JSON trong JavaScript

by - September. 26, 2021
Kiến thức
Học
<p><img class="aligncenter wp-image-8241 size-full" src="https://tek4.vn/wp-content/uploads/2021/02/Capture-63.png" alt="JSON trong JavaScript" width="755" height="443" /></p> <p>Trong b&agrave;i viết n&agrave;y, ta sẽ t&igrave;m hiểu về định dạng JSON trong JavaScript c&ugrave;ng với sự trợ gi&uacute;p của c&aacute;c v&iacute; dụ dẫn chứng.</p> <h1>Định dạng JSON</h1> <p>JSON l&agrave; từ viết tắt của Javascript Object Notation. JSON l&agrave; một định dạng dữ liệu dựa tr&ecirc;n văn bản được sử dụng để lưu trữ v&agrave; truyền dữ liệu.</p> <p>V&iacute; dụ về JSON:</p> <pre class="EnlighterJSRAW" data-enlighter-language="generic">{ &nbsp;&nbsp;&nbsp; "ten": "Nam", &nbsp;&nbsp;&nbsp; "ID": 100 }</pre> <p>Trong JSON, dữ liệu được lưu trữ trong c&aacute;c cặp kh&oacute;a v&agrave; gi&aacute; trị được ph&acirc;n t&aacute;ch bằng dấu phẩy, JSON được bắt nguồn từ JavaScript. V&igrave; vậy, c&uacute; ph&aacute;p JSON giống với c&uacute; ph&aacute;p của đối tượng trong JavaScript. Tuy nhi&ecirc;n, định dạng JSON cũng c&oacute; thể được truy cập v&agrave; được tạo bởi c&aacute;c ng&ocirc;n ngữ lập tr&igrave;nh kh&aacute;c.</p> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: Đối tượng JavaScript v&agrave; JSON l&agrave; kh&ocirc;ng giống nhau. Ta sẽ t&igrave;m hiểu về sự kh&aacute;c biệt của ch&uacute;ng ở phần sau trong b&agrave;i viết n&agrave;y.</span></strong></p> <h2>Dữ liệu JSON</h2> <p>Dữ liệu JSON bao gồm c&aacute;c cặp kh&oacute;a v&agrave; gi&aacute; trị tương tự như c&aacute;c thuộc t&iacute;nh đối tượng trong JavaScript. Kh&oacute;a v&agrave; gi&aacute; trị được viết trong dấu ngoặc k&eacute;p c&aacute;ch nhau bằng dấu hai chấm:.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="generic">"ten": "Nam",</pre> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: Dữ liệu JSON y&ecirc;u cầu dấu nh&aacute;y k&eacute;p được sử dụng cho kh&oacute;a.</span></strong></p> <h2>Đối tượng JSON</h2> <p>Đối tượng JSON được viết b&ecirc;n trong dấu ngoặc nhọn {}. C&aacute;c đối tượng JSON c&oacute; thể chứa nhiều cặp kh&oacute;a v&agrave; gi&aacute; trị.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="generic">{ "ten": "Nam", "ID": 100 }</pre> <h2>Mảng JSON</h2> <p>Mảng ở định dạng JSON được viết b&ecirc;n trong dấu ngoặc vu&ocirc;ng [].</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="generic">[100, 200, 300]</pre> <p>Hoặc</p> <pre class="EnlighterJSRAW" data-enlighter-language="generic">[ &nbsp;&nbsp;&nbsp; { "ten": "Nam", ID: 100 }, &nbsp;&nbsp;&nbsp; { "ten": "Trung", ID: 200 }. &nbsp;&nbsp;&nbsp; { "ten": "Thanh", ID: 300 } ]</pre> <p><strong><span style="background-color: #ffff00;">Ch&uacute; &yacute;: Dữ liệu JSON c&oacute; thể chứa c&aacute;c đối tượng v&agrave; mảng. Tuy nhi&ecirc;n, kh&ocirc;ng giống như c&aacute;c đối tượng trong JavaScript, dữ liệu JSON kh&ocirc;ng thể chứa c&aacute;c h&agrave;m dưới dạng gi&aacute; trị.</span></strong></p> <h2>Truy cập dữ liệu ở định dạng JSON</h2> <p>Ta c&oacute; thể truy cập dữ liệu ở định dạng JSON bằng c&aacute;ch sử dụng k&yacute; hiệu dấu chấm.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const data = { &nbsp;&nbsp;&nbsp; "ten": "Nam", &nbsp;&nbsp;&nbsp; "ID": 100, &nbsp;&nbsp;&nbsp; "email":"Nam@aaaaaa" } console.log(data.ten); console.log(data.email);</pre> <p>Ch&uacute;ng ta sử dụng k&yacute; hiệu dấu chấm để truy cập dữ liệu JSON.</p> <p><em>C&uacute; ph&aacute;p như sau:</em></p> <pre class="EnlighterJSRAW" data-enlighter-language="generic">T&ecirc;n_biến.kh&oacute;a</pre> <p>Ta cũng c&oacute; thể sử dụng c&uacute; ph&aacute;p dấu ngoặc vu&ocirc;ng <code class="EnlighterJSRAW" data-enlighter-language="generic">[]</code>để truy cập dữ liệu JSON.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const data = { &nbsp;&nbsp;&nbsp; "ten": "Nam", &nbsp;&nbsp;&nbsp; "ID": 100, &nbsp;&nbsp;&nbsp; "email":"Nam@aaaaaa" } console.log(data['ten']); console.log(data['email']);</pre> <h2>So s&aacute;nh kiểu dữ liệu JSON với kiểu dữ liệu Object (đối tượng) trong Javascript</h2> <table> <tbody> <tr> <td style="text-align: center;">JSON</td> <td style="text-align: center;">Đối tượng trong Javascript</td> </tr> <tr> <td>Cặp kh&oacute;a v&agrave; gi&aacute; trị được đặt trong dấu nh&aacute;y k&eacute;p.</td> <td>Cặp kh&oacute;a v&agrave; gi&aacute; trị c&oacute; thể hoặc kh&ocirc;ng được đặt trong dấu nh&aacute;y k&eacute;p.</td> </tr> <tr> <td>Kh&ocirc;ng thể chứa c&aacute;c h&agrave;m.</td> <td>C&oacute; thể chứa c&aacute;c h&agrave;m.</td> </tr> <tr> <td>Được tạo v&agrave; sử dụng bởi c&aacute;c ng&ocirc;n ngữ lập tr&igrave;nh kh&aacute;c.</td> <td>Chỉ c&oacute; thể được sử dụng trong ng&ocirc;n ngữ lập tr&igrave;nh Javascript.</td> </tr> </tbody> </table> <h2>Chuyển đổi JSON th&agrave;nh đối tượng trong JavaScript</h2> <p>Ta c&oacute; thể chuyển đổi dữ liệu JSON sang một đối tượng trong JavaScript bằng c&aacute;ch sử dụng h&agrave;m JSON.parse() đ&atilde; được t&iacute;ch hợp sẵn.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const data = '{"ten": "Nam", "ID": 100}'; const obj = JSON.parse(data); console.log(obj.ten);</pre> <h2>Chuyển đổi đối tượng trong JavaScript th&agrave;nh định dạng JSON</h2> <p>Ta cũng c&oacute; thể chuyển đổi c&aacute;c đối tượng trong JavaScript sang định dạng JSON bằng c&aacute;ch sử dụng h&agrave;m <code class="EnlighterJSRAW" data-enlighter-language="generic">JSON.stringify()</code>được t&iacute;ch hợp sẵn trong JavaScript.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">const obj = { 'ten': 'Nam', 'ID': 100 }; const data = JSON.stringify(obj); console.log(data);</pre> <h2>C&ocirc;ng dụng của JSON</h2> <p>JSON l&agrave; định dạng được sử dụng phổ biến nhất để truyền dữ liệu (trao đổi dữ liệu) từ m&aacute;y chủ đến m&aacute;y kh&aacute;ch v&agrave; ngược lại. Dữ liệu JSON rất dễ ph&acirc;n t&iacute;ch v&agrave; sử dụng. Truy cập v&agrave; thao t&aacute;c dữ liệu JSON sẽ diễn ra nhanh ch&oacute;ng v&igrave; ch&uacute;ng chỉ chứa văn bản. JSON độc lập với ng&ocirc;n ngữ lập tr&igrave;nh. Ta cũng c&oacute; thể tạo v&agrave; sử dụng JSON trong c&aacute;c ng&ocirc;n ngữ lập tr&igrave;nh kh&aacute;c.</p> <p>Tr&ecirc;n đ&acirc;y l&agrave; kh&aacute;i niệm v&agrave; v&iacute; dụ cơ bản về định dạng JSON trong JavaScript. Hy vọng mọi người c&oacute; thể &aacute;p dụng v&agrave;o trong chương tr&igrave;nh của m&igrave;nh. Mọi người h&atilde;y tiếp tục theo d&otilde;i c&aacute;c b&agrave;i tiếp theo v&agrave; cập nhật c&aacute;c b&agrave;i tiếp theo về lập tr&igrave;nh JavaScript tr&ecirc;n <a href="http://tek4.vn">tek4</a> nh&eacute;!</p> <p>P/s: Cảm ơn mọi người đ&atilde; tin tưởng tek4!</p>