I am trying to display JSON data to a DataTable in Flutter. The data is coming from an API, getting data is no problem. But I am running to a problem displaying the list of some data in DataTable, I think is because of the JSON structure.
Here is the JSON sample
"response": [
{
"league": {
"id": 1,
"name": "World Cup",
"country": "World",
"logo": "https://media.api-sports.io/football/leagues/1.png",
"flag": null,
"season": 2018,
"standings": [
[
{
"rank": 1,
"team": {
"id": 7,
"name": "Uruguay",
"logo": "https://media.api-sports.io/football/teams/7.png"
},
"points": 9,
"goalsDiff": 5,
"group": "FIFA World Cup: Group A",
"form": "WWW",
"status": "same",
"description": "8th Finals",
"all": {
"played": 3,
"win": 3,
"draw": 0,
"lose": 0,
"goals": {
"for": 5,
"against": 0
}
},
"home": {
"played": 2,
"win": 2,
"draw": 0,
"lose": 0,
"goals": {
"for": 4,
"against": 0
}
},
"away": {
"played": 1,
"win": 1,
"draw": 0,
"lose": 0,
"goals": {
"for": 1,
"against": 0
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 2,
"team": {
"id": 4,
"name": "Russia",
"logo": "https://media.api-sports.io/football/teams/4.png"
},
"points": 6,
"goalsDiff": 4,
"group": "FIFA World Cup: Group A",
"form": "LWW",
"status": "same",
"description": "8th Finals",
"all": {
"played": 3,
"win": 2,
"draw": 0,
"lose": 1,
"goals": {
"for": 8,
"against": 4
}
},
"home": {
"played": 2,
"win": 2,
"draw": 0,
"lose": 0,
"goals": {
"for": 8,
"against": 1
}
},
"away": {
"played": 1,
"win": 0,
"draw": 0,
"lose": 1,
"goals": {
"for": 0,
"against": 3
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 3,
"team": {
"id": 23,
"name": "Saudi Arabia",
"logo": "https://media.api-sports.io/football/teams/23.png"
},
"points": 3,
"goalsDiff": -5,
"group": "FIFA World Cup: Group A",
"form": "WLL",
"status": "same",
"description": null,
"all": {
"played": 3,
"win": 1,
"draw": 0,
"lose": 2,
"goals": {
"for": 2,
"against": 7
}
},
"home": {
"played": 1,
"win": 1,
"draw": 0,
"lose": 0,
"goals": {
"for": 2,
"against": 1
}
},
"away": {
"played": 2,
"win": 0,
"draw": 0,
"lose": 2,
"goals": {
"for": 0,
"against": 6
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 4,
"team": {
"id": 32,
"name": "Egypt",
"logo": "https://media.api-sports.io/football/teams/32.png"
},
"points": 0,
"goalsDiff": -4,
"group": "FIFA World Cup: Group A",
"form": "LLL",
"status": "same",
"description": null,
"all": {
"played": 3,
"win": 0,
"draw": 0,
"lose": 3,
"goals": {
"for": 2,
"against": 6
}
},
"home": {
"played": 1,
"win": 0,
"draw": 0,
"lose": 1,
"goals": {
"for": 0,
"against": 1
}
},
"away": {
"played": 2,
"win": 0,
"draw": 0,
"lose": 2,
"goals": {
"for": 2,
"against": 5
}
},
"update": "2020-06-18T00:00:00+00:00"
}
],
[
{
"rank": 1,
"team": {
"id": 9,
"name": "Spain",
"logo": "https://media.api-sports.io/football/teams/9.png"
},
"points": 5,
"goalsDiff": 1,
"group": "FIFA World Cup: Group B",
"form": "WWW",
"status": "same",
"description": "8th Finals",
"all": {
"played": 3,
"win": 1,
"draw": 2,
"lose": 0,
"goals": {
"for": 6,
"against": 5
}
},
"home": {
"played": 1,
"win": 0,
"draw": 1,
"lose": 0,
"goals": {
"for": 2,
"against": 2
}
},
"away": {
"played": 2,
"win": 1,
"draw": 1,
"lose": 0,
"goals": {
"for": 4,
"against": 3
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 2,
"team": {
"id": 27,
"name": "Portugal",
"logo": "https://media.api-sports.io/football/teams/27.png"
},
"points": 5,
"goalsDiff": 1,
"group": "FIFA World Cup: Group B",
"form": "LWW",
"status": "same",
"description": "8th Finals",
"all": {
"played": 3,
"win": 1,
"draw": 2,
"lose": 0,
"goals": {
"for": 5,
"against": 4
}
},
"home": {
"played": 2,
"win": 1,
"draw": 1,
"lose": 0,
"goals": {
"for": 4,
"against": 3
}
},
"away": {
"played": 1,
"win": 0,
"draw": 1,
"lose": 0,
"goals": {
"for": 1,
"against": 1
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 3,
"team": {
"id": 22,
"name": "Iran",
"logo": "https://media.api-sports.io/football/teams/22.png"
},
"points": 4,
"goalsDiff": 0,
"group": "FIFA World Cup: Group B",
"form": "WLL",
"status": "same",
"description": null,
"all": {
"played": 3,
"win": 1,
"draw": 1,
"lose": 1,
"goals": {
"for": 2,
"against": 2
}
},
"home": {
"played": 2,
"win": 0,
"draw": 1,
"lose": 1,
"goals": {
"for": 1,
"against": 2
}
},
"away": {
"played": 1,
"win": 1,
"draw": 0,
"lose": 0,
"goals": {
"for": 1,
"against": 0
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 4,
"team": {
"id": 31,
"name": "Morocco",
"logo": "https://media.api-sports.io/football/teams/31.png"
},
"points": 1,
"goalsDiff": -2,
"group": "FIFA World Cup: Group B",
"form": "LLL",
"status": "same",
"description": null,
"all": {
"played": 3,
"win": 0,
"draw": 1,
"lose": 2,
"goals": {
"for": 2,
"against": 4
}
},
"home": {
"played": 1,
"win": 0,
"draw": 0,
"lose": 1,
"goals": {
"for": 0,
"against": 1
}
},
"away": {
"played": 2,
"win": 0,
"draw": 1,
"lose": 1,
"goals": {
"for": 2,
"against": 3
}
},
"update": "2020-06-18T00:00:00+00:00"
}
],
[
{
"rank": 1,
"team": {
"id": 2,
"name": "France",
"logo": "https://media.api-sports.io/football/teams/2.png"
},
"points": 7,
"goalsDiff": 2,
"group": "FIFA World Cup: Group C",
"form": "WWW",
"status": "same",
"description": "8th Finals",
"all": {
"played": 3,
"win": 2,
"draw": 1,
"lose": 0,
"goals": {
"for": 3,
"against": 1
}
},
"home": {
"played": 2,
"win": 2,
"draw": 0,
"lose": 0,
"goals": {
"for": 3,
"against": 1
}
},
"away": {
"played": 1,
"win": 0,
"draw": 1,
"lose": 0,
"goals": {
"for": 0,
"against": 0
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 2,
"team": {
"id": 21,
"name": "Denmark",
"logo": "https://media.api-sports.io/football/teams/21.png"
},
"points": 5,
"goalsDiff": 1,
"group": "FIFA World Cup: Group C",
"form": "LWW",
"status": "same",
"description": "8th Finals",
"all": {
"played": 3,
"win": 1,
"draw": 2,
"lose": 0,
"goals": {
"for": 2,
"against": 1
}
},
"home": {
"played": 2,
"win": 0,
"draw": 2,
"lose": 0,
"goals": {
"for": 1,
"against": 1
}
},
"away": {
"played": 1,
"win": 1,
"draw": 0,
"lose": 0,
"goals": {
"for": 1,
"against": 0
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 3,
"team": {
"id": 30,
"name": "Peru",
"logo": "https://media.api-sports.io/football/teams/30.png"
},
"points": 3,
"goalsDiff": 0,
"group": "FIFA World Cup: Group C",
"form": "WLL",
"status": "same",
"description": null,
"all": {
"played": 3,
"win": 1,
"draw": 0,
"lose": 2,
"goals": {
"for": 2,
"against": 2
}
},
"home": {
"played": 1,
"win": 0,
"draw": 0,
"lose": 1,
"goals": {
"for": 0,
"against": 1
}
},
"away": {
"played": 2,
"win": 1,
"draw": 0,
"lose": 1,
"goals": {
"for": 2,
"against": 1
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 4,
"team": {
"id": 20,
"name": "Australia",
"logo": "https://media.api-sports.io/football/teams/20.png"
},
"points": 1,
"goalsDiff": -3,
"group": "FIFA World Cup: Group C",
"form": "LLL",
"status": "same",
"description": null,
"all": {
"played": 3,
"win": 0,
"draw": 1,
"lose": 2,
"goals": {
"for": 2,
"against": 5
}
},
"home": {
"played": 1,
"win": 0,
"draw": 0,
"lose": 1,
"goals": {
"for": 0,
"against": 2
}
},
"away": {
"played": 2,
"win": 0,
"draw": 1,
"lose": 1,
"goals": {
"for": 2,
"against": 3
}
},
"update": "2020-06-18T00:00:00+00:00"
}
],
The code display the data in the datatable
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: FutureBuilder<Standings>(
future: _apiService.getStandings(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
Standings datas = snapshot.data;
return ListView.builder(
itemCount: datas.response[0].league.standings.length,
itemBuilder: (BuildContext ctx, int i) {
return Card(
child: DataTable(
// ignore: prefer_const_constructors
// ignore: prefer_const_literals_to_create_immutables
// ignore: prefer_const_constructors
columns: <DataColumn>[
DataColumn(
label: Text('Team'),
),
],
rows: <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(
Text(datas.response[0].league.standings[0][0]
.team.name),
),
],
),
],
),
);
});
}
return Center(
child: CircularProgressIndicator(),
);
}),
));
The result Result when ran code
I know the reason one team is showing is because of this code
<DataCell>[
DataCell(
Text(datas.response[0].league.standings[i][0]
.team.name),
),
But how can I display the rest of teams automatically? Thanks in advance.
