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.
For anyone that was facing the same problem, based on this question(Link) that was answered, this help me modified the code.
return ListView.builder(
itemCount: datas.response[0].league.standings.length,
itemBuilder: (BuildContext ctx, int i) {
return Column(
children: <Widget>[
ListTile(
title: Text(
datas.response[0].league.standings[i][0].group),
),
Row(
children: [
Text('Position'),
Text(''),
Text('Team'),
],
),
Card(
child: Row(
children: <Widget>[
Column(
children: <Widget>[
Text(datas
.response[0].league.standings[i][0].rank
.toString()),
Text(datas
.response[0].league.standings[i][1].rank
.toString()),
Text(datas
.response[0].league.standings[i][2].rank
.toString()),
Text(datas
.response[0].league.standings[i][3].rank
.toString()),
],
),
Column(children: <Widget>[
Image(
image: NetworkImage(datas.response[0].league
.standings[i][0].team.logo),
height: 30,
width: 20,
),
Image(
image: NetworkImage(datas.response[0].league
.standings[i][1].team.logo),
height: 30,
width: 20,
),
Image(
image: NetworkImage(datas.response[0].league
.standings[i][2].team.logo),
height: 30,
width: 20,
),
Image(
image: NetworkImage(datas.response[0].league
.standings[i][3].team.logo),
height: 30,
width: 20,
),
]),
Column(
children: [
Text(datas.response[0].league.standings[i][0]
.team.name),
Text(datas.response[0].league.standings[i][1]
.team.name),
Text(datas.response[0].league.standings[i][2]
.team.name),
Text(datas.response[0].league.standings[i][3]
.team.name)
],
)
],
),
)
],
);
});