(PARSE JSON TRONG FLUTTER)

Flutter Jun 24, 2021

Chào mọi người lại là Chao đây :))

Hôm nay em sẽ đưa đến một chủ đề không mới nhưng cần thiết trong công cuộc call API đó là Parse JSON.

Trong flutter có khá nhiều thư viện hỗ trợ cho việc này, nhưng trước khi sử dụng các thư viện chúng ta cần hiểu bản chất của nó trước đã.

Chúng ta có bài toán như sau

* em có lược bỏ bớt 1 số trường vì sẽ quá dài để hiển thị :>

Đây là một đoạn JSON data được trả về từ một API bất kỳ nào đó, và nhiệm vụ của chúng ta là parse chúng. Nhìn chúng khá phức tạp vì object lồng array khá nhiều.

Vậy trước khi chúng ta sẽ tiến hành parse thì cần phân tích các Model class có trong đoạn JSON này.

  1. Class ngoài cùng (DATA) có 2 thuộc tính success, data (là một array chứa các Class con).
  2. Trong Array data chúng ta có class element (NEWS) chứa thuộc tính id, title, reaction, description.
  3. Trong class (NEWS) trường Reaction là một array vì vậy chúng ta có ELEMENT của nó là một class có các thuộc tính reply_id, name, description, target_user.

Qua các phân tích trên chúng ta có được 4 class khác nhau trong một đoạn JSON trên

  1. DATA
  1. NEWS













  1. REACTION
  1. REPLY

Trong các class trên thì e có khai báo một hàm fromJson để làm nhiệm vụ parse JSON theo dạng key rồi ép kiểu về kiểu đã được khai báo trong object.

Việc khai báo các class đã xong. bây giờ chúng ta sẽ tiến hành sử dụng chúng, cụ thể là ở một function call API bất kì.


lúc này chúng ta chỉ cần gọi function doGetList(); ở bất kì nơi nào chúng ta muốn và lấy được data mình cần.

BÀI TOÁN THỨ 2.

như vậy chúng ta đã đi qua được các cách tạo class sao cho dễ dàng nhất cho việc parse JSON. Vậy bài toán thứ 2 dưới đây cũng cùng một cấu trúc JSON như thế vậy chúng ta cần làm thế nào để có thể tái sử dụng class mà không cần tạo ra quá nhiều.

Chúng ta có thể thấy ở đoạn JSON thứ 2 này cũng có cấu trúc khá tương tự như đoạn đầu tiên, chỉ khác ở chỗ lần này trường data là một object.

Chúng ta vẫn tạo ra thêm 1 class DATA với trường data là object?.

Câu trả lời là không -> thay vào đó chúng ta sẽ tạo ra một class generic type cho trường hợp này

Nhưng trước hết chúng ta cũng cần có class model cho chúng


Tiếp theo sẽ là 1 cái BaseResponse cho cả 2 ví dụ trên


Và khi sử dụng thì chúng ta sẽ truyền Type vào cho BaseResponse kèm theo đó khai báo kiểu chúng ta muốn parse vào hàm parseJson trong class BaseResponse


Ok, nếu vậy thì sử dụng cho Bài toán thứ nhất như thế nào



Ngoài ra nếu như API có trả thêm Error chúng ta cũng có thể tìm hiểu xem cấu trúc Error như thế nào đc khai báo ở đâu, ví dụ như dưới đây


Thông thường API sẽ trả error khi data là null


Bài chia sẻ đến đây là hết, tuy đề tài không mới nhưng ngôn ngữ chúng ta học lại mới, đây là sẽ là hành trang quan trọng với mọi người trong dự án Flutter sắp tới

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.