I can't show data from a json file Flutter

Question

How can I display this data in my application? in the debug console you see the data that I want to show in the form of a list, but no matter how hard I try, I don't get it:

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
  };
}

The json file is like this: [ { "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" } ]

The widget to display is this:

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());
    }
  },
);

and the Future I use I built it this way:

Oddly, the page doesn't work well for me if I paste this part as a code, so that's why I upload it in a photo:

I am sorry if my problem is annoying, I have been stuck in this problem for a long time and I don't know what else to do, I also apologize for showing the code in this way.

Answer 1

Try this,

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;
}

You have to handle snapshot.hasError part too. Otherwise you won't know if there is any error in the 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());
      }
    },
  );
}

map keys are case sensitive. So

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,
    };
  }
}

Also check this online tool(Quicktype) to generate dart classes for json. (Don't forget to change the language)

Answer 2

Once you get data in JSON, you are converting that data into List<dynamic> and you are just printing that data, and returning empty List<Participants> so first of all you need to modify your function as per your need.

I am assuming that in your other part of application you are using List<Participants>, and in Participants object you have different properties like Apellido, Chip, Nombre etc.

Where are you using this function you need to create list view to show that data. Here is one example of list view that you can modify and use in your application

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}')),
    );
  }
);