Flutter中如何解析嵌套列表结构的JSON数据？

问题分析 #

你的代码存在两个核心问题：

• UserDetailsModal.fromJson中直接将JSON数组赋值给List<ApprovedAllowedLeaves>，未完成从JSON对象到模型实例的转换
• 服务类的parseUserDetails方法错误地将单个对象按列表解析，API返回的是单个用户详情对象而非列表

修正步骤 #

1. 补全ApprovedAllowedLeaves模型类 #

确保该类拥有正确的fromJson工厂方法，用于解析单个休假条目：

class ApprovedAllowedLeaves {
  final String leaveType;
  final int days;

  const ApprovedAllowedLeaves({
    required this.leaveType,
    required this.days,
  });

  factory ApprovedAllowedLeaves.fromJson(Map<String, dynamic> json) {
    return ApprovedAllowedLeaves(
      leaveType: json['leavetype'],
      days: json['days'],
    );
  }
}

2. 修正UserDetailsModal的fromJson方法 #

在该方法中，将每个JSON数组的元素逐个转换为ApprovedAllowedLeaves实例：

import 'package:basefl/models/approvedallowedleaves.dart';

class UserDetailsModal {
  final String userId;
  final List<ApprovedAllowedLeaves> leavesApproved;
  final List<ApprovedAllowedLeaves> leavesAlloted;
  final List<ApprovedAllowedLeaves> leaveRemaining;

  const UserDetailsModal({
    required this.userId,
    required this.leavesApproved,
    required this.leavesAlloted,
    required this.leaveRemaining,
  });

  factory UserDetailsModal.fromJson(Map<String, dynamic> json) {
    // 封装嵌套列表解析逻辑
    List<ApprovedAllowedLeaves> parseLeaveList(List<dynamic> list) {
      return list.map((item) => ApprovedAllowedLeaves.fromJson(item)).toList();
    }

    return UserDetailsModal(
      userId: json['userId'],
      leavesApproved: parseLeaveList(json['leavesApproved']),
      leavesAlloted: parseLeaveList(json['leavesAlloted']),
      leaveRemaining: parseLeaveList(json['leaveRemaining']),
    );
  }
}

3. 修正服务类的解析逻辑 #

API返回的是单个UserDetailsModal对象，因此需要调整parseUserDetails方法的返回类型和解析逻辑：

import 'package:basefl/models/userdetailsmodal.dart';
import 'package:flutter/foundation.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

class LeaveService {
  // 修正返回类型为UserDetailsModal，解析单个对象
  UserDetailsModal parseUserDetails(String responseBody) {
    final Map<String, dynamic> parsed = jsonDecode(responseBody);
    return UserDetailsModal.fromJson(parsed);
  }

  Future<UserDetailsModal> getUserDetails(String userId) async {
    final response = await http.get(Uri.parse(
        'https://run.mocky.io/v3/00aabcdf-69e6-45c2-89fa-aef9619878e1'));
    if (response.statusCode == 200) {
      return compute(parseUserDetails, response.body);
    } else {
      throw Exception('无法获取考勤数据。');
    }
  }
}

使用示例 #

在UI层调用服务获取并使用数据：

final LeaveService service = LeaveService();

void fetchLeaveData() async {
  try {
    UserDetailsModal userDetails = await service.getUserDetails('123');
    // 访问嵌套列表中的数据
    print(userDetails.leavesApproved.first.leaveType);
  } catch (e) {
    print(e.toString());
  }
}

内容的提问来源于stack exchange，提问作者Mohit H