One post tagged with "Model" | Hướng Nghiệp Dữ Liệu

Hướng Dẫn Parse JSON Trong Flutter Bằng Model + Factory Constructor

January 15, 2025 · 11 min read

FullStack

Parse JSON là một kỹ năng cơ bản nhưng quan trọng trong Flutter. Bài viết này sẽ hướng dẫn bạn cách parse JSON chuyên nghiệp bằng cách sử dụng model class với factory constructor.

1️⃣ Tại Sao Sử Dụng Model Class?

1.1 Vấn Đề Khi Parse JSON Thủ Công

// ❌ Không tốt: Parse trực tiếp
void fetchUser() async {
  final response = await http.get(Uri.parse('https://api.example.com/user'));
  final json = jsonDecode(response.body);
  
  // Truy cập trực tiếp - dễ lỗi, không type-safe
  String name = json['name'];
  int age = json['age'];
  // Nếu API thay đổi, code sẽ lỗi runtime
}

Vấn đề:

❌ Không type-safe
❌ Dễ lỗi khi API thay đổi
❌ Khó maintain
❌ Không có autocomplete

1.2 Giải Pháp: Model Class

// ✅ Tốt: Sử dụng model class
class User {
  final String name;
  final int age;

  User({required this.name, required this.age});

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      name: json['name'] as String,
      age: json['age'] as int,
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'name': name,
      'age': age,
    };
  }
}

// Sử dụng
void fetchUser() async {
  final response = await http.get(Uri.parse('https://api.example.com/user'));
  final json = jsonDecode(response.body);
  final user = User.fromJson(json);
  
  // Type-safe, có autocomplete
  print(user.name);
  print(user.age);
}

Lợi ích:

✅ Type-safe
✅ Dễ maintain
✅ Có autocomplete
✅ Dễ test
✅ Có thể validate data

2️⃣ Model Class Cơ Bản

2.1 Model Đơn Giản

class User {
  final int id;
  final String name;
  final String email;
  final bool isActive;

  User({
    required this.id,
    required this.name,
    required this.email,
    required this.isActive,
  });

  // Factory constructor để parse từ JSON
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'] as int,
      name: json['name'] as String,
      email: json['email'] as String,
      isActive: json['is_active'] as bool? ?? true, // Default value
    );
  }

  // Method để convert sang JSON
  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'email': email,
      'is_active': isActive,
    };
  }

  // Copy method để tạo instance mới với một số thay đổi
  User copyWith({
    int? id,
    String? name,
    String? email,
    bool? isActive,
  }) {
    return User(
      id: id ?? this.id,
      name: name ?? this.name,
      email: email ?? this.email,
      isActive: isActive ?? this.isActive,
    );
  }

  @override
  String toString() {
    return 'User(id: $id, name: $name, email: $email, isActive: $isActive)';
  }
}

2.2 Sử Dụng Model

// Parse từ JSON string
String jsonString = '''
{
  "id": 1,
  "name": "Nguyễn Văn A",
  "email": "nguyenvana@example.com",
  "is_active": true
}
''';

final json = jsonDecode(jsonString) as Map<String, dynamic>;
final user = User.fromJson(json);

print(user.name); // Nguyễn Văn A
print(user.email); // nguyenvana@example.com

// Convert sang JSON
final userJson = user.toJson();
print(jsonEncode(userJson));

3️⃣ Xử Lý Các Trường Hợp Đặc Biệt

3.1 Nullable Fields

class User {
  final int id;
  final String name;
  final String? phone; // Nullable
  final String? avatar; // Nullable

  User({
    required this.id,
    required this.name,
    this.phone,
    this.avatar,
  });

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'] as int,
      name: json['name'] as String,
      phone: json['phone'] as String?,
      avatar: json['avatar'] as String?,
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'phone': phone,
      'avatar': avatar,
    };
  }
}

3.2 Default Values

factory User.fromJson(Map<String, dynamic> json) {
  return User(
    id: json['id'] as int,
    name: json['name'] as String,
    phone: json['phone'] as String? ?? '', // Default empty string
    isActive: json['is_active'] as bool? ?? true, // Default true
    createdAt: json['created_at'] != null
        ? DateTime.parse(json['created_at'] as String)
        : DateTime.now(), // Default now
  );
}

3.3 Type Conversion

class Product {
  final int id;
  final String name;
  final double price;
  final DateTime createdAt;

  Product({
    required this.id,
    required this.name,
    required this.price,
    required this.createdAt,
  });

  factory Product.fromJson(Map<String, dynamic> json) {
    return Product(
      id: json['id'] as int,
      name: json['name'] as String,
      // Convert string to double
      price: (json['price'] as num).toDouble(),
      // Convert string to DateTime
      createdAt: DateTime.parse(json['created_at'] as String),
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'price': price,
      'created_at': createdAt.toIso8601String(),
    };
  }
}

4️⃣ Nested Objects

4.1 Object Trong Object

// Address model
class Address {
  final String street;
  final String city;
  final String country;

  Address({
    required this.street,
    required this.city,
    required this.country,
  });

  factory Address.fromJson(Map<String, dynamic> json) {
    return Address(
      street: json['street'] as String,
      city: json['city'] as String,
      country: json['country'] as String,
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'street': street,
      'city': city,
      'country': country,
    };
  }
}

// User model với Address
class User {
  final int id;
  final String name;
  final Address address; // Nested object

  User({
    required this.id,
    required this.name,
    required this.address,
  });

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'] as int,
      name: json['name'] as String,
      address: Address.fromJson(json['address'] as Map<String, dynamic>),
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'address': address.toJson(),
    };
  }
}

// JSON example
String jsonString = '''
{
  "id": 1,
  "name": "Nguyễn Văn A",
  "address": {
    "street": "123 Đường ABC",
    "city": "Hà Nội",
    "country": "Việt Nam"
  }
}
''';

final user = User.fromJson(jsonDecode(jsonString) as Map<String, dynamic>);
print(user.address.city); // Hà Nội

4.2 Nullable Nested Object

class User {
  final int id;
  final String name;
  final Address? address; // Nullable nested object

  User({
    required this.id,
    required this.name,
    this.address,
  });

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'] as int,
      name: json['name'] as String,
      address: json['address'] != null
          ? Address.fromJson(json['address'] as Map<String, dynamic>)
          : null,
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'address': address?.toJson(),
    };
  }
}

5️⃣ Lists và Arrays

5.1 List of Primitives

class User {
  final int id;
  final String name;
  final List<String> tags; // List of strings

  User({
    required this.id,
    required this.name,
    required this.tags,
  });

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'] as int,
      name: json['name'] as String,
      tags: (json['tags'] as List<dynamic>)
          .map((tag) => tag as String)
          .toList(),
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'tags': tags,
    };
  }
}

5.2 List of Objects

class User {
  final int id;
  final String name;
  final List<Address> addresses; // List of Address objects

  User({
    required this.id,
    required this.name,
    required this.addresses,
  });

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'] as int,
      name: json['name'] as String,
      addresses: (json['addresses'] as List<dynamic>)
          .map((address) => Address.fromJson(address as Map<String, dynamic>))
          .toList(),
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'addresses': addresses.map((address) => address.toJson()).toList(),
    };
  }
}

5.3 Nullable List

factory User.fromJson(Map<String, dynamic> json) {
  return User(
    id: json['id'] as int,
    name: json['name'] as String,
    addresses: json['addresses'] != null
        ? (json['addresses'] as List<dynamic>)
            .map((address) => Address.fromJson(address as Map<String, dynamic>))
            .toList()
        : [], // Default empty list
  );
}

6️⃣ Enum Parsing

6.1 Parse Enum Từ String

enum UserStatus {
  active,
  inactive,
  suspended,
}

class User {
  final int id;
  final String name;
  final UserStatus status;

  User({
    required this.id,
    required this.name,
    required this.status,
  });

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'] as int,
      name: json['name'] as String,
      status: UserStatus.values.firstWhere(
        (e) => e.name == json['status'],
        orElse: () => UserStatus.inactive, // Default
      ),
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'status': status.name,
    };
  }
}

6.2 Enum Với Custom Values

enum UserStatus {
  active('active'),
  inactive('inactive'),
  suspended('suspended');

  final String value;
  const UserStatus(this.value);

  static UserStatus fromString(String value) {
    return UserStatus.values.firstWhere(
      (e) => e.value == value,
      orElse: () => UserStatus.inactive,
    );
  }
}

class User {
  final int id;
  final String name;
  final UserStatus status;

  User({
    required this.id,
    required this.name,
    required this.status,
  });

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'] as int,
      name: json['name'] as String,
      status: UserStatus.fromString(json['status'] as String),
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'status': status.value,
    };
  }
}

7️⃣ Ví Dụ Hoàn Chỉnh: Complex Model

class User {
  final int id;
  final String name;
  final String email;
  final String? phone;
  final Address? address;
  final List<String> tags;
  final List<Order> orders;
  final UserStatus status;
  final DateTime createdAt;
  final DateTime? updatedAt;

  User({
    required this.id,
    required this.name,
    required this.email,
    this.phone,
    this.address,
    required this.tags,
    required this.orders,
    required this.status,
    required this.createdAt,
    this.updatedAt,
  });

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'] as int,
      name: json['name'] as String,
      email: json['email'] as String,
      phone: json['phone'] as String?,
      address: json['address'] != null
          ? Address.fromJson(json['address'] as Map<String, dynamic>)
          : null,
      tags: json['tags'] != null
          ? (json['tags'] as List<dynamic>).map((e) => e as String).toList()
          : [],
      orders: json['orders'] != null
          ? (json['orders'] as List<dynamic>)
              .map((e) => Order.fromJson(e as Map<String, dynamic>))
              .toList()
          : [],
      status: UserStatus.fromString(json['status'] as String? ?? 'inactive'),
      createdAt: DateTime.parse(json['created_at'] as String),
      updatedAt: json['updated_at'] != null
          ? DateTime.parse(json['updated_at'] as String)
          : null,
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'email': email,
      'phone': phone,
      'address': address?.toJson(),
      'tags': tags,
      'orders': orders.map((e) => e.toJson()).toList(),
      'status': status.value,
      'created_at': createdAt.toIso8601String(),
      'updated_at': updatedAt?.toIso8601String(),
    };
  }

  User copyWith({
    int? id,
    String? name,
    String? email,
    String? phone,
    Address? address,
    List<String>? tags,
    List<Order>? orders,
    UserStatus? status,
    DateTime? createdAt,
    DateTime? updatedAt,
  }) {
    return User(
      id: id ?? this.id,
      name: name ?? this.name,
      email: email ?? this.email,
      phone: phone ?? this.phone,
      address: address ?? this.address,
      tags: tags ?? this.tags,
      orders: orders ?? this.orders,
      status: status ?? this.status,
      createdAt: createdAt ?? this.createdAt,
      updatedAt: updatedAt ?? this.updatedAt,
    );
  }

  @override
  String toString() {
    return 'User(id: $id, name: $name, email: $email)';
  }
}

class Address {
  final String street;
  final String city;
  final String country;

  Address({
    required this.street,
    required this.city,
    required this.country,
  });

  factory Address.fromJson(Map<String, dynamic> json) {
    return Address(
      street: json['street'] as String,
      city: json['city'] as String,
      country: json['country'] as String,
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'street': street,
      'city': city,
      'country': country,
    };
  }
}

class Order {
  final int id;
  final double total;
  final DateTime orderDate;

  Order({
    required this.id,
    required this.total,
    required this.orderDate,
  });

  factory Order.fromJson(Map<String, dynamic> json) {
    return Order(
      id: json['id'] as int,
      total: (json['total'] as num).toDouble(),
      orderDate: DateTime.parse(json['order_date'] as String),
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'total': total,
      'order_date': orderDate.toIso8601String(),
    };
  }
}

enum UserStatus {
  active('active'),
  inactive('inactive'),
  suspended('suspended');

  final String value;
  const UserStatus(this.value);

  static UserStatus fromString(String value) {
    return UserStatus.values.firstWhere(
      (e) => e.value == value,
      orElse: () => UserStatus.inactive,
    );
  }
}

8️⃣ Sử Dụng Với API

import 'package:dio/dio.dart';
import 'dart:convert';

class UserRepository {
  final Dio dio = Dio();

  Future<User> getUser(int id) async {
    try {
      final response = await dio.get('/users/$id');
      return User.fromJson(response.data as Map<String, dynamic>);
    } catch (e) {
      throw Exception('Failed to get user: $e');
    }
  }

  Future<List<User>> getUsers() async {
    try {
      final response = await dio.get('/users');
      return (response.data as List<dynamic>)
          .map((json) => User.fromJson(json as Map<String, dynamic>))
          .toList();
    } catch (e) {
      throw Exception('Failed to get users: $e');
    }
  }

  Future<User> createUser(User user) async {
    try {
      final response = await dio.post(
        '/users',
        data: user.toJson(),
      );
      return User.fromJson(response.data as Map<String, dynamic>);
    } catch (e) {
      throw Exception('Failed to create user: $e');
    }
  }
}

9️⃣ Best Practices

9.1 Error Handling

factory User.fromJson(Map<String, dynamic> json) {
  try {
    return User(
      id: json['id'] as int,
      name: json['name'] as String,
      email: json['email'] as String,
    );
  } catch (e) {
    throw FormatException('Failed to parse User: $e');
  }
}

9.2 Validation

factory User.fromJson(Map<String, dynamic> json) {
  // Validate required fields
  if (json['id'] == null || json['name'] == null) {
    throw FormatException('Missing required fields');
  }

  // Validate email format
  final email = json['email'] as String;
  if (!email.contains('@')) {
    throw FormatException('Invalid email format');
  }

  return User(
    id: json['id'] as int,
    name: json['name'] as String,
    email: email,
  );
}

9.3 Sử Dụng json_serializable (Optional)

Để tự động generate code, bạn có thể sử dụng json_serializable:

dependencies:
  json_annotation: ^4.8.1

dev_dependencies:
  build_runner: ^2.4.7
  json_serializable: ^6.7.1

import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart';

@JsonSerializable()
class User {
  final int id;
  final String name;
  final String email;

  User({required this.id, required this.name, required this.email});

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
  Map<String, dynamic> toJson() => _$UserToJson(this);
}

🔟 Kết Luận

Parse JSON với model class và factory constructor giúp bạn:

✅ Type-safe: Tránh lỗi runtime
✅ Dễ maintain: Code rõ ràng, dễ đọc
✅ Có autocomplete: IDE hỗ trợ tốt
✅ Dễ test: Có thể test parsing logic
✅ Validation: Có thể validate data

💡 Lời khuyên: Luôn sử dụng model class cho JSON parsing. Đừng parse trực tiếp từ Map<String, dynamic> trong business logic.

🎓 Học Sâu Hơn Về Flutter

Muốn master Flutter, JSON Parsing, và các best practices? Tham gia các khóa học tại Hướng Nghiệp Dữ Liệu:

📚 Khóa Học Liên Quan:

✅ Lập Trình Ứng Dụng Di Động Flutter - Xây dựng ứng dụng Flutter từ cơ bản đến nâng cao

📝 Bài viết này được biên soạn bởi đội ngũ Hướng Nghiệp Dữ Liệu. Để cập nhật thêm về Flutter, JSON parsing và các best practices trong phát triển ứng dụng di động, hãy theo dõi blog của chúng tôi.

1️⃣ Tại Sao Sử Dụng Model Class?​

1.1 Vấn Đề Khi Parse JSON Thủ Công​

1.2 Giải Pháp: Model Class​

2️⃣ Model Class Cơ Bản​

2.1 Model Đơn Giản​

2.2 Sử Dụng Model​

3️⃣ Xử Lý Các Trường Hợp Đặc Biệt​

3.1 Nullable Fields​

3.2 Default Values​

3.3 Type Conversion​

4️⃣ Nested Objects​

4.1 Object Trong Object​

4.2 Nullable Nested Object​

5️⃣ Lists và Arrays​

5.1 List of Primitives​

5.2 List of Objects​

5.3 Nullable List​

6️⃣ Enum Parsing​

6.1 Parse Enum Từ String​

6.2 Enum Với Custom Values​

7️⃣ Ví Dụ Hoàn Chỉnh: Complex Model​

8️⃣ Sử Dụng Với API​

9️⃣ Best Practices​

9.1 Error Handling​

9.2 Validation​

9.3 Sử Dụng json_serializable (Optional)​

🔟 Kết Luận​

🎓 Học Sâu Hơn Về Flutter​

📚 Khóa Học Liên Quan:​