我無法顯示來自 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}')),
    );
  }
);