将 JSON 数据显示到 DataTable Flutter
Posted
技术标签:
【中文标题】将 JSON 数据显示到 DataTable Flutter【英文标题】：Displaying JSon Data to DataTable Flutter 【发布时间】：2021-08-18 04:05:18 【问题描述】：我正在尝试将 JSON 数据显示到 Flutter 中的 DataTable。数据来自 API，获取数据没有问题。但是我在显示 DataTable 中的一些数据列表时遇到了问题，我认为是因为 JSON 结构。
这是 JSON 示例
"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"
],
代码显示数据表中的数据
@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(),
);
),
));
结果 Result when ran code
我知道一个团队展示的原因是因为这段代码
<DataCell>[
DataCell(
Text(datas.response[0].league.standings[i][0]
.team.name),
),
但是如何自动显示其余团队？提前致谢。
【问题讨论】：
【参考方案1】：对于遇到同样问题的任何人，根据已回答的这个问题 (Link)，这有助于我修改代码。
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)
],
)
],
),
)
],
);
);
【讨论】：
以上是关于将 JSON 数据显示到 DataTable Flutter的主要内容，如果未能解决你的问题，请参考以下文章
在聚合物2.0中成功响应后，将显示纸-datatable-api绑定到阵列
在 jquery 数据表中显示之前将 json 日期格式化为 mm/dd/yy 格式
JavaScript + Jquery DataTable - 将数据传递到 defaultContent json 列