在flutter ListView中显示复杂的API
提问于 2021-05-02 19:09:47
我有一个复杂的API，它有一个json数组。我想在flutter listView中显示JSON中的细节。下面是我的json
{
"hours": [
{
"time": "2021-03-23T00:00:00+00:00",
"waveHeight": {
"icon": 1.35,
"meteo": 1.25,
"noaa": 1.28,
"sg": 1.25
}
},
{
"time": "2021-03-23T00:00:00+00:00",
"waveHeight": {
"icon": 1.35,
"meteo": 1.25,
"noaa": 1.28,
"sg": 1.25
}
},
],
}这是fetch data函数
void getJsonData() async {
String url2 =
'https://api.stormglass.io/v2/weather/point?lat=5.9774&lng=80.4288¶ms=waveHeight&start=2021-03-23&end2021-03-24';
String apiKey =
'sxascdsvfdyhujn5787654gb-7a54-11eb-8302-0242ac130002';
print('0');
try {
Response response = await get(Uri.parse(url2),
headers: {HttpHeaders.authorizationHeader: apiKey});
var jsonData = jsonDecode(response.body);
List data = jsonData["hours"];
data.forEach((element) {
Map obj = element;
Map wave = obj['waveHeight'];
String time = obj['time'];
print(time);
double icon = wave['icon'];
print(icon);
});
} catch (e) {
print(e);
}
}所有JSON数据均已成功获取并显示在控制台中。但我想在flutter ListView中显示数据。我该怎么做呢？
回答 1
Stack Overflow用户
发布于 2021-05-02 19:54:35
首先定义一个新类
class Wave {
final DateTime time;
final double icon;
final double meteo;
final double noaa;
final double sg;
Wave ({
this.time,
this.icon,
this.meteo,
this.noaa,
this.sg,
});
}创建空列表
List<Wave> _data = [];使用以下代码编辑您的代码
final _extractedData = json.decode(result.body) as Map<String, dynamic>;
List<Wave> _fetchedData = [];
_extractedData['hours'].forEach((value) {
_fetchedData.add(Wave(
time: value['time'],
icon: value['icon'],
meteo: value['meteo'],
noaa: value['noaa'],
sg: value['sg'],
));
});
_data = _fetchedData;_data具有从json接收的新数据列表。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67360220
复制
腾讯云开发者
