Flutter - 解析多个 json 数组并设置为列表

Posted 2023-02-15

【中文标题】Flutter - 解析多个 json 数组并设置为列表

【英文标题】：Flutter - Parse multiple json array and set to list

【发布时间】：2022-01-21 03:44:20

【问题描述】：

这是响应正文的 JSON：

    "status": "success",
    "contents": [
        "id": "15",
        "cname": "DOGS",
        "dogs_image": "1638695967-rtyyyt.jpg",
        "cat_image": "1638695967-jhjjj.jpg",
        "sub_category": [
            "subcatid": "36",
            "cat_id": "15",
            "sub_category_name": "Accessories",
            "banner": null,
            "image": "1638695982-ACCESORIE.jpg"
        , 
            "subcatid": "39",
            "cat_id": "15",
            "sub_category_name": "Beds",
            "banner": null,
            "image": "1638695982-ACCESORIE.jpg"
        ]
    , 
        "id": "14",
        "cname": "CATS",
        "dogs_image": "1638695967-rtyyyt.jpg",
        "cat_image": "1638695967-jhjjj.jpg",
        "sub_category": [
            "subcatid": "47",
            "cat_id": "14",
            "sub_category_name": "Accessories",
            "banner": null,
            "image": "1638695982-ACCESORIE.jpg"
        ]
    ]

// API调用获取上述json数据：

Future<List<CatListData>> dashboardDataAPI(http.Client client) async 
  final response = await client.get(Uri.parse(Utilities.BASE_URL));
  List list = json.decode(response.body)['contents'];
  return parsePhotos(list.toString());

// 将响应体转换为List的函数

List<CatListData> parsePhotos(String responseBody) 
  final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
  return parsed.map<CatListData>((json) => CatListData.fromJson(json)).toList();

// 猫列表类

class CatListData
  final String id;
  final String cName;
  final String dogImage;
  final String catImage;
  final List<SubCatListData> subCatListDataList;

  CatListData(required this.id, required this.cName, required this.dogImage, required this.catImage, required this.subCatListDataList);

  factory CatListData.fromJson(Map<String, dynamic> json) 
    return CatListData(
      id: json['id'] as String,
      cName: json['cname'] as String,
      dogImage: json['dogs_image'] as String,
      catImage: json['cat_image'] as String,
     subCatListDataList: List<SubCatListData>.from(json['sub_category'] as Iterable),
    );
  

// 子猫类

class SubCatListData
  final String subCatId;
  final String catId;
  final String subCategoryName;
  final String banner;
  final String image;

  SubCatListData(required this.subCatId, required this.catId, required this.subCategoryName, required this.banner, required this.image);

  factory SubCatListData.fromJson(Map<String, dynamic> json) 
    return SubCatListData(
      subCatId: json['subcatid'] as String,
      catId: json['cat_id'] as String,
      subCategoryName: json['sub_category_name'] as String,
      banner: json['banner'] as String,
      image: json['image'] as String,
    );
  

打印快照时这里显示为空

Container(
                      child: FutureBuilder<List<CatListData>>(
                        future: dashboardDataAPI(http.Client()),
                        builder: (context, snapshot) 
                          print("Response:: "+snapshot.data.toString());
                          if (snapshot.hasData) 
                            return PhotosList(photos: snapshot.data!);
                          else if(snapshot.hasError)
                            return const Center(
                                child: Text('An error has occurred!'),);
                          else
                            return const Center(
                              child: CircularProgressIndicator(),
                            );
                          
                        ,
                      ),
                    )

请告诉我如何解决此问题并将多个 json 数组数据解析到列表中。 谢谢

【问题讨论】：

不显示null是因为future还没有完成吗？？

它返回 null 并执行 else if state snapshot.haserror 语句。

【参考方案1】：

我相信问题发生在 CatListData.fromJson 构造函数的这一行：

subCatListDataList: List<SubCatListData>.from(json['sub_category'] as Iterable),

你永远不会打电话给SubCatListData.fromJson，我相信这会更适合你的任务：

subCatListDataList: (json['sub_category'] as Iterable).map<SubCatListData>(
  (value) => SubCatListData.fromJson(value as Map<String, dynamic>),
),