【问题标题】:Flutter model for nested json嵌套 json 的颤振模型
【发布时间】:2021-05-02 03:55:26
【问题描述】:

我正在创建一个用于数据可视化的颤振应用程序。 将有 3 页:

  • 过滤条件的过滤页面,
  • 用于可视化搜索结果的列表页面,
  • 详情页面。

我会收到这样的 json:

数据.json

[
    {
        "name": "Jhon",
        "surname": "Walker",
        "details": "{\"work\":{\"salary\":\"116\",\"company\":\"evolution\",\"image\":\"http://image.jpg\"},\"address\":{\"street\":\"grand station\",\"city\":\"salt lake\"}}"    
    },
    {
        "name": "Alan",
        "surname": "Turing",
        "details": "{\"work\":{\"salary\":\"116\",\"company\":\"evolution\",\"image\":\"http://image.jpg\"},\"address\":{\"street\":\"grand station\",\"city\":\"salt lake\"}}"    
    }
]

这可能是一个很长的列表。

我已经在这里发布了一个关于我的这个应用程序代码不起作用的问题,这里是讨论

Flutter app error

所以现在我要问一个不同的问题。哪个是这个 json 结构的最佳模型? 我需要直接访问详细信息对象中的所有字段。我想有能力直接拿到外地工资或公司。 我需要访问图像字段,该字段将包含要在应用程序中显示的图像的 url。 在链接的帖子中,我使用序列化和built_value 生成了一个模型。 它在代码中不起作用,我仍然收到错误:

type String is not a subtype of type 'Map<String, dynamic>' in type cast

而且我在网上找到的任何解决方案似乎都不起作用。

我创建了另一个没有嵌套对象的模型,我是这样做的: 模型.dart

class User {

  String name;

  String surname;

  String details;


  User({
    this.name,
    this.surname,
    this.details,
  });


  factory User.fromJson(Map<String, dynamic> json) => User(
    name: json["name"],
    surname: json["surname"],
    details: json["details"],
  );

  Map<String, dynamic> toJson() => {
    "name": name,
    "surname": surname,
    "details": details,
  };
}

使用此模型,我可以在 ListView 上显示数据,但详细信息字段是唯一的大字符串,我不知道如何访问详细信息对象中的字段。 我只能想到正则表达式,但这听起来有点棘手,为什么我有 JSON 时应该使用正则表达式?

哪个模型最适合这个 json?我应该改变路径吗? 您对更好的数据模型有什么建议,或者从我链接的讨论中正确使用数据模型的解决方案? 我问的不是同一个问题,我只是想找到使用标准 json 访问 deatils 字段的正确解决方案。

谢谢!

【问题讨论】:

    标签: android json flutter mobile data-modeling


    【解决方案1】:

    这是我目前使用的模型的解决方案:

    model.dart

    import 'dart:convert';
    
    List<User> userFromJson(String str) =>
        List<User>.from(json.decode(str).map((x) => User.fromJson(x)));
    
    String userToJson(List<User> data) =>
        json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
    
    class User {
      User({
        this.name,
        this.surname,
        this.areaName,
        this.details,
      });
    
      String name;
      String surname;
      String areaName;
      String details;
    
      factory User.fromJson(Map<String, dynamic> json) => User(
            name: json["name"],
            surname: json["surname"],
            areaName: json["areaName"],
            details: json["details"],
          );
    
      Map<String, dynamic> toJson() => {
            "name": name,
            "surname": surname,
            "areaName": areaName,
            "details": details,
          };
    }
    
    Details DetailsFromJson(String str) => Details.fromJson(json.decode(str));
    
    String DetailsToJson(Details data) => json.encode(data.toJson());
    
    class Details {
      Details({
        this.work,
        this.address,
      });
    
      Work work;
      Address address;
    
      factory Details.fromJson(Map<String, dynamic> json) => Details(
            work: Work.fromJson(json["work"]),
            address: Address.fromJson(json["address"]),
          );
    
      Map<String, dynamic> toJson() => {
            "work": work.toJson(),
            "address": address.toJson(),
          };
    }
    
    class Address {
      Address({
        this.street,
        this.city,
      });
    
      String street;
      String city;
    
      factory Address.fromJson(Map<String, dynamic> json) => Address(
            street: json["street"],
            city: json["city"],
          );
    
      Map<String, dynamic> toJson() => {
            "street": street,
            "city": city,
          };
    }
    
    class Work {
      Work({
        this.salary,
        this.company,
      });
    
      String salary;
      String company;
    
      factory Work.fromJson(Map<String, dynamic> json) => Work(
            salary: json["salary"],
            company: json["company"],
          );
    
      Map<String, dynamic> toJson() => {
            "salary": salary,
            "company": company,
          };
    }
    

    感谢您的帮助!

    【讨论】:

      【解决方案2】:

      请参考此链接以获取您的 json 模型。

      https://app.quicktype.io/

      添加你的 json,选择你的语言,你就可以拥有你的模型了。

      【讨论】:

      • 我已经用过了。但详细信息字段将是唯一的字符串。但是我看到这个字符串在解码后没有转义包。如果我为 ExtraData 创建一个带有 quicktype 的模型,我可以将其设为字符串并使用此模型为 ExtraData 解码?
      【解决方案3】:

      尝试编码您的 JSON 文件:

      final data = jsonEncode(file);
      final user = User.fromJson(data);
      

      Flutter 文档在 this 页面上包含一些有用的 JSON 编码/解码操作示例。

      【讨论】:

      • 什么型号?因为两个模型都有一个错误:“参数类型 String 不能分配给参数类型 Map。现在我的 json 被加载到 String 中。
      • 例如:您可以为用户类创建一个小部件并将用户类实例传递给它。在小部件的内部,您可以更改具体用户的值并通过调用 setState 更改 UI。
      • 但是我必须传递一个用户列表,以便可视化用户列表,然后在详细信息页面中,我将传递一个用户。我错了?
      • 仍然不知道模型是什么以及如何使其工作。我通过阅读您链接的页面的文档生成了模型,但我无法创建用户列表并显示它。
      • 拥有用户列表后,您可以操作它们。您可以从users.map((user) =&gt; ListTile(title: Text(user.name))) 的集合中为每个用户创建ListTile 对象,并将小部件列表传递给Column 类(仅作为示例)。
      猜你喜欢
      • 2022-01-05
      • 2022-11-28
      • 1970-01-01
      • 1970-01-01
      • 2020-11-15
      • 2023-03-22
      • 2018-06-14
      • 2020-07-12
      • 2021-04-02
      相关资源
      最近更新 更多