如何正确处理 Flutter 中的 json 数组？

Question

所以基本上我是在 Flutter 中使用 http 包从 api 获取数据。 response.body 是一个如下所示的数组：

[
   {
      "id":1,
      "full_name":"Cristiano Ronaldo",
      "avatar":"http://localhost:8000/media/avatars/Ronaldo.jpeg",
      "created":"2021-06-30T02:25:56.332816Z"
   },
   {
      "id":2,
      "full_name":"Paul Pogba",
      "avatar":"http://localhost:8000/media/avatars/Pogba.jpeg",
      "created":"2021-06-30T02:49:17.649970Z"
   },
   {
      "id":3,
      "full_name":"Paulo Dybala",
      "avatar":"http://localhost:8000/media/avatars/Dybala.jpeg",
      "created":"2021-06-30T02:52:33.338296Z"
   },
   {
      "id":4,
      "full_name":"Leonel Messi",
      "avatar":"http://localhost:8000/media/avatars/Messi.jpeg",
      "created":"2021-06-30T02:53:39.539556Z"
   },
   {
      "id":5,
      "full_name":"Kylian Mbappe",
      "avatar":"http://localhost:8000/media/avatars/Mbappe.jpeg",
      "created":"2021-06-30T02:57:29.891686Z"
   }
]

我的问题是我想基本上将其格式化为“飞镖”方式。像这样的：

List players = response.body;

我得到的错误是这样的：

A value of type 'String' can't be assigned to a variable of type 'List<dynamic>'.
Try changing the type of the variable, or casting the right-hand type to 'List<dynamic>'.

为什么会出现这个错误。我知道列表已经正确格式化，并且 json 对象的键值对都是字符串，但我想将其格式化为“飞镖”方式。如果我这样做：

var players = response.body;

确实有效。我应该只使用 var 并称之为好还是应该格式化它？

附加问题： 如果我想在initState方法中调用方法从api获取数据，我会这样做吗：

Future<void> _getPlayers() async {
   ...
} 

void initState() {
   super.initState();
   _getPlayers();
}

谢谢！

Answer 1

有很多方法可以做到这一点

最有效的方法是像这样制作Object

class Player {
  final int id;
  final String fullName;
  final String avatar;
  final String created;

  const Player({this.id, this.fullName, this.avatar, this.created});

  Player.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    fullName = json['full_name'];
    avatar = json['avatar'];
    created = json['created'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['full_name'] = this.fullName;
    data['avatar'] = this.avatar;
    data['created'] = this.created;
    return data;
  }
}

那你就可以增值了

• 不是这样的

List players = response.body

• 你可以这样使用

var data = json.decode(response.body);

List<Player> players  = data.map((element){
   return Player.fromJson(element);
}).toList();

用于访问来自players 列表的数据

• 你可以这样做

players[0].fullName;
players[1].fullName;

Answer 2

基本上，您是在尝试将 JSON 转换为列表而不对其进行解码，

编码的 JSON 是这样的字符串

"{ \"username\": \"ali\", \"number\": \"ali@gmail.com\" }"

当你解码它时，它会变成这样的 List 或 Map

{ 
   "username": "ali",
   "email": "ali@gmail.com"
}

因此，要修复您的代码，您需要对 json 进行解码，然后将其转换为列表

List players = jsonDecode(response.body);

...

侧面回答：

是的，您可以这样做，但这会在页面之间导航时导致异常（假设您向服务器发送了一个请求，当数据到来时，您必须 setState 小部件，但即使小部件已释放并且您导航到其他页面，您的方法将在未安装的小部件上调用 setState，这将导致异常）

因此，如果您不打算使用依赖管理库，那么只需使用未来的构建器

Answer 3

将此添加到您的代码中：

import 'dart:convert';

那么，

var players = jsonDecode(response.body);