openplanning

Xử lý Dart JSON với gói dart_json_mapper

  1. dart_json_mapper
  2. Cài đặt thư viện
  3. Ví dụ

1. dart_json_mapper

dart_json_mapper là một thư viện cung cấp một giải pháp tốt hơn so với dart:convert để làm việc với các dữ liệu JSON, nó phù hợp với các ứng dụng có mô hình JSON phức tạp. Tuy nhiên, để sử dụng nó bạn cần một vài bước cấu hình. Với các ứng dụng nhỏ bạn nên sử dụng thư viện dart:convert - đơn giản và không cần bất kỳ một cấu hình bổ xung nào.
Thư viện dart_json_mapper lấy cảm hứng từ json2typescript, serde, gson, tính năng ngang bằng với Java Jackson rất phổ biến và chỉ có bốn Annotation cần nhớ để bao gồm tất cả các trường hợp sử dụng có thể.
dart_json_mapper vs json_serializable
json_serializable là một thư viện xử lý JSON tốt hơn dart:convert. Tuy nhiên, nó chỉ là là một thư viện bán tự động, và không thể so sánh với các tính năng mà dart_json_mapper mang lại.

2. Cài đặt thư viện

Đế sử dụng thư viện dart_json_mapper bạn cần khai báo nó trong file pubspec.yaml:
pubspec.yaml
dependencies:
  dart_json_mapper:

dev_dependencies:
  build_runner:

3. Ví dụ

Đầu tiên, thêm file build.yaml vào project của bạn. Đây là file cấu hình, được sử dụng để chỉ dẫn cho build_runner sinh ra các file mã nguồn mới từ các file mã nguồn được chỉ định.
build.yaml
targets:
  $default:
    builders:
      dart_json_mapper:
        generate_for:
        # here should be listed entry point files having 'void main()' function
          - lib/src/model_file1.dart
          - lib/src/model_file2.dart

      # This part is needed to tell original reflectable builder to stay away
      # it overrides default options for reflectable builder to an **empty** set of files
      reflectable:
        generate_for:
          - no/files
Tiếp theo, tạo 2 file trong thư mục "lib/src". Các file đặt trong thư mục này chỉ được sử dụng trong nội bộ project của bạn. Nếu muốn chúng có thể sử dụng trong các project khác hãy đặt chúng trong thư mục "lib".
dart_json_mapper_tutorial (Your Project Name)
  - lib
      - src
           - model_file1.dart
           - model_file2.dart
model_file1.dart: Chứa các lớp ContactEmployee, với các quy tắc để chuyển đổi chúng sang các cấu trúc JSON và ngược lại.
lib/src/model_file1.dart
import 'package:dart_json_mapper/dart_json_mapper.dart'
    show JsonMapper, jsonSerializable, JsonProperty;

@jsonSerializable
class Contact {
  String address;
  String phone;
  Contact(this.address, this.phone); // Constructor
}
@jsonSerializable
class Employee {
  @JsonProperty(name: 'employeeName')
  String name;
  String email;
  Contact contact;
  Employee(this.name, this.email, this.contact); // Constructor
}
void main() {
  // Empty
}
model_file2.dart: Chứa lớp Company, với các quy tắc để chuyển đổi nó sang các cấu trúc JSON và ngược lại.
lib/src/model_file2.dart
import 'package:dart_json_mapper/dart_json_mapper.dart'
    show JsonMapper, jsonSerializable, JsonProperty;

import 'model_file1.dart';

@jsonSerializable
class Company {
  @JsonProperty(name: 'companyName')
  String name;
  Contact contact;
  Company(this.name, this.contact); // Constructor
}
void main() {
  // Empty
}
Mở cửa sổ Terminal trên IDE:
  • View > Terminal (Visual Studio Code)
  • View > Tool Windows > Terminal (Android Studio)
Chạy một trong 2 lệnh dưới đây (Tuỳ thuộc vào dự án của bạn là Dart hay Flutter):
dart pub run build_runner build --delete-conflicting-outputs

flutter pub run build_runner build --delete-conflicting-outputs
Kết quả là sẽ có 2 file được tạo ra. Hãy chạy lại lệnh trên nếu bạn thay đổi mã nguồn trên các file model.
Tạo ví dụ "bin/test_ex1.dart", ví dụ này chỉ cho bạn cách chuyển đổi một đối tượng Dart thành văn bản JSON:
bin/test_ex1.dart
import 'package:dart_json_mapper/dart_json_mapper.dart'
    show JsonMapper, jsonSerializable, JsonProperty;

// 'dart_json_mapper_tutorial' : Your project name.
import 'package:dart_json_mapper_tutorial/src/model_file1.dart';
import 'package:dart_json_mapper_tutorial/src/model_file2.dart';

import 'package:dart_json_mapper_tutorial/src/model_file1.mapper.g.dart'
    as modelFile1;
import 'package:dart_json_mapper_tutorial/src/model_file2.mapper.g.dart'
    as modelFile2;

void main() {
  modelFile1.initializeJsonMapper();
  var contact = Contact('Address 1', '12345');
  var employee = Employee('John Smith', 'john@example.com', contact);

  var jsonString = JsonMapper.toJson(employee);
  print(jsonString);

  print(' --------------------------- ');

  modelFile2.initializeJsonMapper();
  contact = Contact('Address 1', '99999');
  var company = Company('Google', contact);
  jsonString = JsonMapper.toJson(company);

  print(jsonString);
}
Output:
{
 "employeeName": "John Smith",
 "email": "john@example.com",
 "contact": {
  "address": "Address 1",
  "phone": "12345"
 }
}
 ---------------------------
{
 "companyName": "Google",
 "contact": {
  "address": "Address 1",
  "phone": "99999"
 }
}
Tiếp theo là ví dụ chuyển đổi một văn bản JSON thành đối tượng Dart:
bin/test_ex2.dart
import 'package:dart_json_mapper/dart_json_mapper.dart'
    show JsonMapper, jsonSerializable, JsonProperty;

// 'dart_json_mapper_tutorial' : Your project name.
import 'package:dart_json_mapper_tutorial/src/model_file1.dart';
import 'package:dart_json_mapper_tutorial/src/model_file2.dart';

import 'package:dart_json_mapper_tutorial/src/model_file1.mapper.g.dart'
    as modelFile1;
import 'package:dart_json_mapper_tutorial/src/model_file2.mapper.g.dart'
    as modelFile2;

void main() {
  var jsonString1 = '''{
      "employeeName": "John Smith",
      "email": "john@example.com",
      "contact": {
        "address": "Address 1",
        "phone": "12345"
        }
      }''';
  modelFile1.initializeJsonMapper();
  // May be null:
  var employee = JsonMapper.fromJson<Employee>(jsonString1);
  print('Employee Phone: ${employee!.contact.phone}');

  print(' --------------------------- ');

  modelFile2.initializeJsonMapper();
  var jsonString2 = '''{
    "companyName": "Google",
    "contact": {
      "address": "Address 1",
      "phone": "99999"
      }
    }''';
  // May be null:
  var company = JsonMapper.fromJson<Company>(jsonString2);
  print('Company Phone: ${company!.contact.phone}');
}
Output:
Employee Phone: 12345
 ---------------------------
Company Phone: 99999