Parse JSON là gì

Giả sử trong code chúng ta có một biến blogInfo nhận giá trị là một chuỗi đươc định dạng theo format JSON như sau:

var blogInfo = '{"ssl": true, "domain": "codehub.vn", "subdomain": "www"}';

Bài toàn đặt ra ở đây là làm sao parse chuỗi trên ngược lại về JavaScript object tương ứng để sử dụng? Trong bài viết này chúng ta sẽ tìm hiểu hai cách khác nhau để thực hiện việc parse chuỗi JSON về JavaScript object.

Parse Chuỗi JSON Sử Dụng JavaScript

var blogInfo = '{"ssl": true, "domain": "codehub.vn", "subdomain": "www"}'; var blogInfoObject = JSON.parse[blogInfo];

Lúc này biến blogInfoObject sẽ là một đối tượng JavaScript tương ứng với chuỗi JSON trên:

console.log[blogInfoObject]; // Hiển thị: {ssl: true, domain: "codehub.vn", subdomain: "www"} console.log[blogInfoObject.ssl]; // Hiển thị: true typeof blogInfoObject; // Hiển thị: "object"

Bạn có thể tham khảo kết quả chạy câu lệnh trên công cụ developer tools của Chrome như hình sau:

.

Parse Chuỗi JSON Sử Dụng jQuery

Mặc dù việc parse chuỗi JSON về dạng JSON object hoàn toàn có thể thực hiện được với JavaScript thuần, tuy nhiên jQuery cũng hỗ trợ phương thức .parseJSON[] để thực hiện tác vụ này:

var blogInfo = '{"ssl": true, "domain": "codehub.vn", "subdomain": "www"}'; var blogInfoObject = jQuery.parseJSON[blogInfo]; console.log[blogInfoObject]; // Hiển thị: {ssl: true, domain: "codehub.vn", subdomain: "www"} console.log[blogInfoObject.ssl]; // Hiển thị: true typeof blogInfoObject; // Hiển thị: "object"

Kết quả hiển thị của đoạn code trên khi chạy trên web developer tools của Chrome:

Lưu ý: Như đã đề cập ở trên, do chúng ta có thể sử dụng JavaScrip thuần để thực hiện việc parse chuỗi JSON nên các phiên bản jQuery 3.x khuyến cáo lập trình viên nên sử dụng JSON.parse[] trong JavaScript thay vì jQuery.parseJSON[].

A common use of JSON is to exchange data to/from a web server.

When receiving data from a web server, the data is always a string.

Parse the data with JSON.parse[], and the data becomes a JavaScript object.

Example - Parsing JSON

Imagine we received this text from a web server:

'{"name":"John", "age":30, "city":"New York"}'

Use the JavaScript function JSON.parse[] to convert text into a JavaScript object:

const obj = JSON.parse['{"name":"John", "age":30, "city":"New York"}'];

Make sure the text is in JSON format, or else you will get a syntax error.

Use the JavaScript object in your page:

document.getElementById["demo"].innerHTML = obj.name;

Try it Yourself »

Array as JSON

When using the JSON.parse[] on a JSON derived from an array, the method will return a JavaScript array, instead of a JavaScript object.

const text = '["Ford", "BMW", "Audi", "Fiat"]'; const myArr = JSON.parse[text];

Try it Yourself »

Exceptions

Parsing Dates

Date objects are not allowed in JSON.

If you need to include a date, write it as a string.

You can convert it back into a date object later:

Convert a string into a date:

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

document.getElementById["demo"].innerHTML = obj.name + ", " + obj.birth;

Try it Yourself »

Or, you can use the second parameter, of the JSON.parse[] function, called reviver.

The reviver parameter is a function that checks each property, before returning the value.

Convert a string into a date, using the reviver function:

const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}'; const 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;

Try it Yourself »

Parsing Functions

Functions are not allowed in JSON.

If you need to include a function, write it as a string.

You can convert it back into a function later:

Convert a string into a function:

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

document.getElementById["demo"].innerHTML = obj.name + ", " + obj.age[];

Try it Yourself »

You should avoid using functions in JSON, the functions will lose their scope, and you would have to use eval[] to convert them back into functions.

Hiện nay, để có thể giải quyết các vấn đề trao đổi dữ liệu giữa các nền tảng cũng như làm nhẹ dữ liệu thì JSON trong JavaScript đã ra đời. Cùng chúng tôi tìm hiểu rõ về JSON trong Javascript cũng như các hàm của nó qua các thông tin dưới đây. 

Định nghĩa JSON trong Javascript

JSON [JavaScript Object Notation] được định nghĩa là bộ quy tắc có liên quan đến việc trình bày cũng như mô tả dữ liệu trong chuỗi lớn thống nhất và được gọi chung là chuỗi JSON. 

Đây là một trong những định dạng lightweight với mục đích chia sẻ, lưu trữ dữ liệu. Hầu hết, đa số các ứng dụng thường có sử dụng API đều sẽ trả về kết quả về dạng JSON. Với cặp Key - Value sẽ được sử dụng trong JSON trong JavaScript để có thể định dạng được dữ liệu. 

JSON trong JavaScript là gì?

Quy tắc định dạng dữ liệu trong JSON như sau: 

• Ký tự { }: được sử dụng nhằm định dạng Object.
• Ký tự [ ]: được sử dụng để định dạng parse json javascript array.
• Thông thường, dữ liệu ở dưới dạng cặp key-value [là tên thuộc tính  - giá trị thuộc tính]. 
• Key: Thường phải được nằm bên trong dấu ngoặc kép và không được phép là biến số. 
• Value: Giá trị này thuộc sẽ nhận được vào 1 trong những loại dữ liệu sau: Một giá trị chuỗi, một mảng, một giá trị số, một mảng [giá trị một phần tử của mảng cũng sẽ có những nguyên tắc tương tự], hay một JSON khác và không cho phép date, function, undefined. 
• Các dữ liệu ngăn cản nhau bởi dấu phẩy. 

Ví dụ như sau:

Ví dụ cụ thể của JSon trong Javascript

Thông thường, JSON đã được thuần định dạng dữ liệu là chỉ chứa những thuộc tính [properties] và không có chứa các phương thức. Nó đòi hỏi phải có dấu nháy kép [double quotes] để sử dụng cho các chuỗi cũng như tên của các thuộc tính. Dấu nháy đơn [Single quotes] thường là không hợp lệ. Thậm chí, bạn chỉ cần một dấu phẩy hoặc dấu hai chấm nếu đặt sai vị trí thì cũng có thể khiến cho tập tin JSON bị sai và không còn hoạt động được nữa. 

 >>> Những bài viết khác cùng chủ đề:

Sự khác biệt giữa JSON và JavaScript Object

Mặc dù rằng JSON thường rất giống với JavaScript Object nhưng chúng vẫn tồn tại những điểm khác biệt như: 

• Value: Nó chỉ cho phép được là những dữ liệu cơ bản như: numbers, Boolean, strings, null, array, object và không được phép là: date, function, undefined hoặc dưới dạng của một biểu thức dạng tính toán. 
• Key: Thông thường thì key cần phải luôn được đóng bên trong dấu ngoặc kép [không được là dấu ngoặc đơn] và nó cũng không được phép là biến số [variable].
• Bạn không được phép để tồn tại dấu phẩy ở cuối cùng như JavaScript Object. 
• Đối với các number thì lập trình viên cần lưu ý không được phép để số 0 xuất hiện ở phần đầu. Ngoài ra, nếu như number là các chữ số thập phân thì cần phải có ít nhất 1 chữ số ở đằng sau dấu chấm [.]. 

Ví dụ cụ thể đối với JSON không hợp lệ:

Loại Json không hợp lệ

Điểm giống và khác nhau của JSON và XML

Điểm giống nhau: 

• JSON và XML đều thuộc dạng “tự mô tả” [con người đều có thể đọc được].
• JSON và XML đều được hệ thống phân cấp rõ ràng [ở đây chính là giá trị trong các giá trị].
• Cả hai đều có thể sẽ được phân tích cú pháp cũng như sử dụng bởi nhiều ngôn ngữ lập trình khác nhau. 
• JSON và XML thường đều có thể lấy được bằng XMLHttpRequest.

Điểm khác nhau:

• Thông thường JSON không sử dụng thẻ để kết thúc.
• JSON ngắn hơn so với XML.
• JSON sở hữu khả năng đọc và viết nhanh hơn XML.
• JSON sở hữu khả năng sử dụng mảng.

Lấy thông tin trong JSON

Những trường hợp nào cần sử dụng JSON?

Một số tình huống cần sử dụng JSON

• Sử dụng để lưu trữ dữ liệu: Có khá nhiều ứng dụng dữ liệu sẽ được lưu trữ dưới file dạng JSON.
• Sử dụng để lưu trữ cấu hình ứng dụng cũng như thông tin xác thực.
• Sử dụng để trao đổi dữ liệu giữa client-server cũng như giữa các server với nhau. 

Ngoài ra, còn có một trường hợp có thể sử dụng JSON tương đối phổ biến đó chính là Ajax. Kỹ thuật Ajax này thường có thể tạo ra request tới server để nhận các dữ liệu trả về dưới dạng JSON. 

Bạn đọc tham khảo thêm: 

Tuyển dụng lập trình viên java lương cao chế độ hấp dẫn

Việc làm php lương cao chế độ hấp dẫn

Tuyển lập trình python lương cao chế độ hấp dẫn

JSON.stringify[] trong Javascript

JSON.stringify[] được xem là một trong những hàm phổ biến của JSON nó được sử dụng để convert một JavaScript Object thành JSON string. Khi phát triển một ứng dụng bằng Javascript thì lập trình viên cần phải tự hóa dữ liệu thành các chuỗi để tiến hành lưu trữ dữ liệu dưới dạng chuỗi. 

Việc chuyển đổi đối tượng này thành một chuỗi khi thực hiện sẽ giúp bạn dễ dàng nhận được những trợ giúp của hàm JSON.stringify[]. 

Tìm hiểu các trường hợp đặc biệt cũng như lỗi khi dùng JSON.stringify[]

• Nếu như một Object sở hữu một property trỏ về chính nó thì JSON.stringify[] trả về 1 error. 

JSON.stringify[] sẽ tiến hành trả về error

• Những trường hợp NaN và Infinity JSON.stringify[] sẽ thực hiện trả về null.

JSON.stringify[] sẽ tiến hành trả về null 

• Tiến hành lọc lọc bỏ tất cả các giá trị undefined hoặc function. 

Các giá trị của undefined hoặc function

Tìm hiểu về JSON.parse[] trong Javascript

JSON.parse[] thường được sử dụng để convert string biểu diễn JSON thành JavasCript Object. Đây được xem là một trong những cách trao đổi cho dữ liệu web server được dễ dàng hơn. Ngay khi bạn nhận được các dữ liệu từ server thì các dữ liệu này bạn đều sẽ được nhận dưới dạng string, JSON.parse có thể đưa ra được các dữ liệu để trở thành đối tượng bên trong Javascript. 

Đối với hàm JSON.parse[] được xem là đồng bộ nên tệp JSON càng lớn cũng như thời gian thực hiện chương trình sẽ dần bị chặn, cho đến khi JSON hoàn thành được các công việc phân tích cho cú pháp. Ngoài ra, bạn cũng có thể thay đổi được giá trị cho các thuộc tính của JSON bằng việc truy cập cho tên thuộc tính. 

Các giá trị của Json

Với các trường hợp ngoại lệ

Những đối tượng “date” đã không nhận được sự cho phép trong JSON đều cần phải sử dụng “date” thì cần phải viết dưới dạng chuỗi string. Ngoài ra, hàm function cũng sẽ không được cho phép trong JSON; chính vì vậy nếu như bạn muốn sử dụng thì cần phải viết nó dưới dạng chuỗi. 

Trường hợp ngoại lệ khi sử dụng Json 

Hy vọng rằng, với những kiến thức mà chúng tôi chia sẻ ở phía trên thì bạn đọc đã hiểu hơn về JSON trong Javascript cũng như các hàng của nó. Mong rằng, thông tin này sẽ hữu ích với bạn trong quá trình học tập cũng như làm các công việc liên quan đến lập trình viên.