带有 dart 数据类生成器扩展的 Json 序列化

Posted 2023-03-29

【中文标题】带有 dart 数据类生成器扩展的 Json 序列化

【英文标题】：Json serialization with dart data class generator extension

【发布时间】：2021-11-08 12:19:27

【问题描述】：

我正在尝试从 api（在本例中为 jsonplaceholder）获取数据。数据的响应是地图列表。我正在尝试检索 id、title 和 body 作为示例。

我有这个有效的代码：

Future<List<Post>> fetchPosts() async 
    final res = await http.get(
      Uri.parse('https://jsonplaceholder.typicode.com/posts'),
    );

    final List<dynamic> parsedPosts = json.decode(res.body);
    return parsedPosts.map((parsedPost) 
      return Post.fromMap(parsedPost);
    ).toList();
  

但是，我想使用 dart 数据类生成器扩展。他们为我的模型提供的 json 序列化的 sn-p 是这样的：

class Post 
  final String title;
  final String body;
  final int id;

  Post(
    required this.title,
    required this.body,
    required this.id,
  );

  Map<String, dynamic> toMap() 
    return 
      'title': title,
      'body': body,
      'id': id,
    ;
  

  factory Post.fromMap(Map<String, dynamic> map) 
    return Post(
      title: map['title'],
      body: map['body'],
      id: map['id'],
    );
  

  String toJson() => json.encode(toMap());

  factory Post.fromJson(String source) => Post.fromMap(json.decode(source));

这里有趣的是他们在类本身中进行解码。这就是我卡住的地方。我不确定如何以与没有此扩展提供的 sn-p 相同的方式获取数据。

也许我只是完全误解了，但我认为这个想法是循环访问 get 请求的结果，然后在其中调用 fromjson 方法。但是， res.body 被认为是一个字符串，我相信 json.decode 实际上是允许我们对其进行循环的原因。

我尝试使用传入的 res.body 为 post.fromjson 分配一个变量，但这也不起作用。

Quicktype 似乎也有这种语法，但他们的解释对于如何实际使用它并不是很有帮助。

// To parse this JSON data, do
//
//     final post = postFromMap(jsonString);

我不知道 postFromMap 指的是什么。我会很感激任何帮助:)

编辑：这几乎就是我想要实现的目标：https://***.com/a/62244941/9453618

但是，我收到错误 Unhandled Exception: type 'List' is not a subtype of type 'Map'

【问题讨论】：

你想在列表中显示这个数据吗？

【参考方案1】：

试试下面的代码，我想你的问题已经解决了。

或者如果您从 API 获取数据，请参考我的回答 here 或 here 或 here 希望对您有所帮助

声明API调用函数：

  Future<List<dynamic>> getJobsData() async 
    String url = 'https://jsonplaceholder.typicode.com/posts';
    var response = await http.get(Uri.parse(url), headers: 
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    );
    return json.decode(response.body);
  

您的小部件：

 Column(
    children: [
      Expanded(
        child: Center(
          child: FutureBuilder<List<dynamic>>(
            future: getJobsData(),
            builder: (context, snapshot) 
              if (snapshot.hasData) 
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ListView.builder(
                    itemCount: snapshot.data.length,
                    itemBuilder: (context, index) 
                      var title = snapshot.data[index]['title'];
                      var body = snapshot.data[index]['body'];
                      var id = snapshot.data[index]['id'];
                      var userId = snapshot.data[index]['userId'];
                      return Card(
                        shape: RoundedRectangleBorder(
                          side: BorderSide(color: Colors.green.shade300),
                          borderRadius: BorderRadius.circular(15.0),
                        ),
                        child: Column(
                          children: [
                            ListTile(
                              leading: Text(id.toString()),
                              title: Text(title),
                              subtitle: Text(
                                body,
                              ),
                              trailing: Text(userId.toString()),
                            ),
                          ],
                        ),
                      );
                    ,
                  ),
                );
              
              return CircularProgressIndicator();
            ,
          ),
        ),
      ),
    ],
  ),

您的屏幕结果：

【讨论】：

这不是我的问题。我在使用扩展提供的 fromJson 方法时遇到问题factory Post.fromJson(String source) => Post.fromMap(json.decode(source));

试试this我的回答