Flutter：如何解析超复杂的 json 文件？

Posted 2023-02-23

【中文标题】Flutter：如何解析超复杂的 json 文件？

【英文标题】：flutter: how to parse super complex json file?

【发布时间】：2022-01-10 11:02:36

【问题描述】：

我有一个超长的json 文件要解析，但是一旦我将fetch 它放在FutureBuilder 中，它就会一直出错，我使用了null check operator on a null value，对我来说似乎我不知道逻辑。 .!

这是simplified json：

  "city": 
    "Name": "oklahoma",
    "Month": [
      
        "number": "01",
        "day": [
          
            "number": "01",
            "employee": "jesse m."
          ,
          
            "number": "02",
            "employee": "john s."
          ,
          
            "number": "03",
            "name": "tyler r."
          
        ]
      ,
      
        "number": "02",
        "day": [
          
            "number": "01",
            "employee": "mat w."
          ,
          
            "number": "02",
            "employee": "may j."
          ,
          
            "number": "03",
            "name": "eric r."
          
        ]
      
    ]
  

note that i have one city and the json has the data of every individual days throughout the whole year

这是model：

// To parse this JSON data, do
//
//     final company = companyFromJson(jsonString);

import 'dart:convert';

company companyFromJson(String str) => company.fromJson(json.decode(str));

String companyToJson(company data) => json.encode(data.toJson());

class company 
    company(
        required this.city,
    );

    City city;

    factory company.fromJson(Map<String, dynamic> json) => company(
        city: City.fromJson(json["city"]),
    );

    Map<String, dynamic> toJson() => 
        "city": city.toJson(),
    ;


class City 
    City(
        required this.name,
        required this.month,
    );

    String name;
    List<Month> month;

    factory City.fromJson(Map<String, dynamic> json) => City(
        name: json["Name"],
        month: List<Month>.from(json["Month"].map((x) => Month.fromJson(x))),
    );

    Map<String, dynamic> toJson() => 
        "Name": name,
        "Month": List<dynamic>.from(month.map((x) => x.toJson())),
    ;


class Month 
    Month(
        required this.number,
        required this.day,
    );

    String number;
    List<Day> day;

    factory Month.fromJson(Map<String, dynamic> json) => Month(
        number: json["number"],
        day: List<Day>.from(json["day"].map((x) => Day.fromJson(x))),
    );

    Map<String, dynamic> toJson() => 
        "number": number,
        "day": List<dynamic>.from(day.map((x) => x.toJson())),
    ;


class Day 
    Day(
        required this.number,
        required this.employee
    );

    String number;
    String employee;

    factory Day.fromJson(Map<String, dynamic> json) => Day(
        number: json["number"],
        employee: json["employee"]
    );

    Map<String, dynamic> toJson() => 
        "number": number,
        "employee": employee
    ;

这是解析方法：

Future<List<Day>> getCompanyEmployee () async 
    String jsonString = await DefaultAssetBundle.of(context).loadString('assets/json/OklahomaEmployee.json');
    List<dynamic> result = jsonDecode(jsonString);
    List<Day> Company = result.map((e) => Day.fromJson(e)).toList();
    return Company;
  

这是实现：

FutureBuilder<List<Day>>(
  future: getCompanyEmployee(),
  builder: (context, snapshot) 
    var itemList = snapshot.data;
    return GridView.builder(
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
      ),
      itemCount: itemList!.length,
      itemBuilder: (BuildContext context, index) 
        var itemData = itemList[index];
        return ClipRRect(
          borderRadius: BorderRadius.circular(25),
          child: Container(
            height: 10,
            color: Colors.white,
            width: 10,
            child: Center(
              child: Column(
                children: [
                  Text(
                    'employee',
                    style: TextStyle(fontSize: 15),
                  ),
                  Text(itemData.employee),
                  Image.asset(
                    'assets/Pictures/employees.png',
                    height: 70,
                  )
                ],
              ),
            ),
          ),
        );
      ,
    );
  ,
)

【参考方案1】：

在您的 FutureBuilder 中，您只是假设未来已经完成。 FutureBuilder 的重点是它没有，你需要处理它。

您需要考虑您的 Futurebuilder 需要构建某物这一事实，即使未来尚未完成。实现这一目标的最简单方法是在您没有数据时显示CircularProgressIndicator。

请参阅 What is a Future and how do I use it? 了解如何执行此操作的示例。