我无法显示来自 json 文件的数据 Flutter

Question

如何在我的应用程序中显示这些数据？ 在调试控制台中，您会看到我想以列表形式显示的数据，但无论我多么努力，我都没有得到它：

class Participantes {
String apellido;
int chip;
String nombre;
int numero;
String place;
String tiempo;

Participantes({
  this.apellido,
  this.chip,
  this.nombre,
  this.numero,
  this.place,
  this.tiempo
});

factory Participantes.fromJson(Map<String, dynamic> parsedJson){
  //print(list.runtimeType);
  return Participantes(
    apellido  : parsedJson['apellido'],
    chip      : parsedJson['chip'],
    nombre    : parsedJson['nombre'],
    numero    : parsedJson['numero'],
    place     : parsedJson['place'],
    tiempo    : parsedJson['tiempo']
  );
}

Map<String, dynamic> toJson() {
  return {
    'apellido'  : apellido,
    'chip'      : chip,
    'nombre'    : nombre,
    'numero'    : numero,
    'place'     : place,
    'tiempo'    : tiempo
  };
}

json 文件是这样的： [ { "Apellido":"MARTINEZ GUTIERREZ", "Chip":739, "Nombre":"JOSE", "Numero":139, "Place":"1.", "Tiempo":"00:30:12,91" }, { "Apellido":"SUAREZ MORERA", "Chip":707, "Nombre":"DANIEL", "Numero":107, "Place":"2.", "Tiempo":"02:00:17,54" } ]

要显示的小部件是这样的：

Widget _crearListadoParticipantes() {
return FutureBuilder(
  future: eventosProvider.cargarParticipantes(evento, participantes),
  builder: (BuildContext context, AsyncSnapshot<List<Participantes>> snapshot) {
    if ( snapshot.hasData ) {
      final participantes = snapshot.data;
      return ListView.builder(
        itemCount: participantes.length,
        //itemBuilder: (context, i) => _crearParticipante(context, participantes[i]),
        itemBuilder: (context, i) {
          return _crearParticipante(context, participantes[i]);
        }
      );

    } else {
      return Center( child: CircularProgressIndicator());
    }
  },
);

以及我使用的 Future 我是这样构建的：

奇怪的是，如果我将这部分作为代码粘贴，该页面对我来说效果不佳，所以这就是我将其上传到照片中的原因：

如果我的问题很烦人，我很抱歉，我已经被这个问题困了很长时间，我不知道还能做什么，我也为以这种方式显示代码表示歉意。

Answer 1

试试这个，

Future<List<Participantes>> cargarParticipantes() async {
  final url = "...."; // Your url
  final resp = await http.get(url);
  final respBody = json.decode(resp.body) as List;
  final participants = respBody.map((x) => Participantes.fromJson(x)).toList();
  return participants;
}

您还必须处理snapshot.hasError部分。 不然future有没有错误你都不知道，

Widget _crearListadoParticipantes() {
  return FutureBuilder<List<Participantes>>(
    future: cargarParticipantes(),
    builder: (context, snapshot) {
      print(snapshot?.data?.length);
      if (snapshot.hasData) {
        final participantes = snapshot.data;
        return ListView.builder(
            itemCount: participantes.length,
            //itemBuilder: (context, i) => _crearParticipante(context, participantes[i]),
            itemBuilder: (context, i) {
              return Text("${participantes[i]}");
              //return _crearParticipante(context, participantes[i]);
            });
      } else if (snapshot.hasError) {
        return Center(child: Text("${snapshot.error}"));
      } else {
        return Center(child: CircularProgressIndicator());
      }
    },
  );
}

映射键区分大小写。 所以

class Participantes {
  String apellido;
  int chip;
  String nombre;
  int numero;
  String place;
  String tiempo;

  Participantes({
    this.apellido,
    this.chip,
    this.nombre,
    this.numero,
    this.place,
    this.tiempo,
  });

  factory Participantes.fromJson(Map<String, dynamic> parsedJson) {
    //print(list.runtimeType);
    return Participantes(
      apellido: parsedJson['Apellido'],
      chip: parsedJson['Chip'],
      nombre: parsedJson['Nombre'],
      numero: parsedJson['Numero'],
      place: parsedJson['Place'],
      tiempo: parsedJson['Tiempo'],
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'Apellido': apellido,
      'Chip': chip,
      'Nombre': nombre,
      'Numero': numero,
      'Place': place,
      'Tiempo': tiempo,
    };
  }
}

还要检查这个在线工具（ Quicktype ）为 json 生成 dart 类。 （不要忘记更改语言）

Answer 2

一旦您获得 JSON 格式的数据，您就将该数据转换为List<dynamic>并且您只是打印该数据，并返回空的List<Participants>因此首先您需要根据需要修改您的函数。

我假设在你的应用程序的其他部分你正在使用List<Participants> ，并且在Participants对象中你有不同的属性，如Apellido ， Chip ， Nombre等。

您在哪里使用此功能，您需要创建列表视图以显示该数据。 这是您可以在应用程序中修改和使用的列表视图的一个示例

final List<Participants> participants = await cargarParticipants(param1, param2);

ListView.builder(
  itemCount: participants.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      child: Center(child: Text('${participants[index].Apellido}')),
    );
  }
);