Flutter：从 json 列表中获取数据
Posted
技术标签:
【中文标题】Flutter：从 json 列表中获取数据【英文标题】：Flutter: Get data from a list of json 【发布时间】：2018-11-29 10:16:30 【问题描述】：我正在通过 URL JSON 做一个与气候相关的学习项目，我得到你的数据并在应用程序中显示它们
我正在尝试从 JSON 中获取数据。 当我尝试获取数据时，我收到一个错误： 类型 '_TypeError' 不是类型 'Widget' 的子类型 我想解决这个问题，感谢任何最小的帮助，谢谢。
我的 JSON：
"metcheckData":
"forecastLocation":
"forecast": [
"temperature": "18",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4656",
"uvIndex": "0",
"totalcloud": "8",
"lowcloud": "8",
"medcloud": "0",
"highcloud": "0",
"humidity": "84",
"windspeed": "9",
"meansealevelpressure": "1018.02",
"windgustspeed": "11",
"winddirection": "28.7724",
"windletter": "NNE",
"icon": "FA",
"iconName": "Fair",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "3",
"weekday": "Tuesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "N",
"utcTime": "2018-06-19T23:00:00.00"
,
"temperature": "18",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4663",
"uvIndex": "0",
"totalcloud": "8",
"lowcloud": "8",
"medcloud": "0",
"highcloud": "0",
"humidity": "85",
"windspeed": "9",
"meansealevelpressure": "1018.26",
"windgustspeed": "11",
"winddirection": "29.4946",
"windletter": "NNE",
"icon": "FA",
"iconName": "Fair",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "N",
"utcTime": "2018-06-20T00:00:00.00"
,
"temperature": "18",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4666",
"uvIndex": "0",
"totalcloud": "8",
"lowcloud": "8",
"medcloud": "0",
"highcloud": "0",
"humidity": "86",
"windspeed": "9",
"meansealevelpressure": "1018.18",
"windgustspeed": "10",
"winddirection": "30.0925",
"windletter": "NNE",
"icon": "FA",
"iconName": "Fair",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "N",
"utcTime": "2018-06-20T01:00:00.00"
,
"temperature": "18",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4668",
"uvIndex": "0",
"totalcloud": "11",
"lowcloud": "11",
"medcloud": "0",
"highcloud": "0",
"humidity": "87",
"windspeed": "8",
"meansealevelpressure": "1017.79",
"windgustspeed": "10",
"winddirection": "30.761",
"windletter": "NNE",
"icon": "FA",
"iconName": "Fair",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "N",
"utcTime": "2018-06-20T02:00:00.00"
,
"temperature": "17",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4671",
"uvIndex": "0",
"totalcloud": "12",
"lowcloud": "12",
"medcloud": "0",
"highcloud": "0",
"humidity": "87",
"windspeed": "8",
"meansealevelpressure": "1017.36",
"windgustspeed": "9",
"winddirection": "31.0844",
"windletter": "NNE",
"icon": "FA",
"iconName": "Fair",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "N",
"utcTime": "2018-06-20T03:00:00.00"
,
"temperature": "17",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4673",
"uvIndex": "0",
"totalcloud": "11",
"lowcloud": "11",
"medcloud": "0",
"highcloud": "0",
"humidity": "88",
"windspeed": "8",
"meansealevelpressure": "1017.04",
"windgustspeed": "9",
"winddirection": "31.4161",
"windletter": "NNE",
"icon": "FA",
"iconName": "Fair",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "N",
"utcTime": "2018-06-20T04:00:00.00"
,
"temperature": "17",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4671",
"uvIndex": "0",
"totalcloud": "11",
"lowcloud": "11",
"medcloud": "0",
"highcloud": "0",
"humidity": "89",
"windspeed": "7",
"meansealevelpressure": "1016.89",
"windgustspeed": "9",
"winddirection": "31.2326",
"windletter": "NNE",
"icon": "FA",
"iconName": "Fair",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "N",
"utcTime": "2018-06-20T05:00:00.00"
,
"temperature": "17",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4668",
"uvIndex": "0",
"totalcloud": "10",
"lowcloud": "10",
"medcloud": "0",
"highcloud": "0",
"humidity": "91",
"windspeed": "8",
"meansealevelpressure": "1017.04",
"windgustspeed": "9",
"winddirection": "30.2947",
"windletter": "NNE",
"icon": "FA",
"iconName": "Fair",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "N",
"utcTime": "2018-06-20T06:00:00.00"
,
"temperature": "17",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4664",
"uvIndex": "0",
"totalcloud": "9",
"lowcloud": "9",
"medcloud": "0",
"highcloud": "0",
"humidity": "92",
"windspeed": "8",
"meansealevelpressure": "1017.35",
"windgustspeed": "10",
"winddirection": "29.0404",
"windletter": "NNE",
"icon": "FA",
"iconName": "Fair",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "D",
"utcTime": "2018-06-20T07:00:00.00"
,
"temperature": "17",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4664",
"uvIndex": "0",
"totalcloud": "16",
"lowcloud": "16",
"medcloud": "0",
"highcloud": "0",
"humidity": "91",
"windspeed": "9",
"meansealevelpressure": "1017.77",
"windgustspeed": "10",
"winddirection": "27.9231",
"windletter": "NNE",
"icon": "FA",
"iconName": "Fair",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "D",
"utcTime": "2018-06-20T08:00:00.00"
,
"temperature": "18",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4673",
"uvIndex": "1",
"totalcloud": "32",
"lowcloud": "32",
"medcloud": "0",
"highcloud": "0",
"humidity": "86",
"windspeed": "9",
"meansealevelpressure": "1018.05",
"windgustspeed": "11",
"winddirection": "25.3295",
"windletter": "NNE",
"icon": "FA",
"iconName": "Fair",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "D",
"utcTime": "2018-06-20T09:00:00.00"
,
"temperature": "18",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4687",
"uvIndex": "2",
"totalcloud": "38",
"lowcloud": "38",
"medcloud": "0",
"highcloud": "0",
"humidity": "82",
"windspeed": "9",
"meansealevelpressure": "1018.31",
"windgustspeed": "10",
"winddirection": "22.0118",
"windletter": "NNE",
"icon": "FA",
"iconName": "Fair",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "D",
"utcTime": "2018-06-20T10:00:00.00"
,
"temperature": "19",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4702",
"uvIndex": "3",
"totalcloud": "36",
"lowcloud": "36",
"medcloud": "0",
"highcloud": "0",
"humidity": "76",
"windspeed": "9",
"meansealevelpressure": "1018.56",
"windgustspeed": "10",
"winddirection": "18.4385",
"windletter": "NNE",
"icon": "FA",
"iconName": "Fair",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "D",
"utcTime": "2018-06-20T11:00:00.00"
,
"temperature": "20",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4712",
"uvIndex": "4",
"totalcloud": "31",
"lowcloud": "31",
"medcloud": "0",
"highcloud": "0",
"humidity": "72",
"windspeed": "9",
"meansealevelpressure": "1018.79",
"windgustspeed": "9",
"winddirection": "14.9684",
"windletter": "NNE",
"icon": "FA",
"iconName": "Fair",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "D",
"utcTime": "2018-06-20T12:00:00.00"
,
"temperature": "20",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4722",
"uvIndex": "5",
"totalcloud": "26",
"lowcloud": "26",
"medcloud": "0",
"highcloud": "0",
"humidity": "69",
"windspeed": "9",
"meansealevelpressure": "1018.9",
"windgustspeed": "8",
"winddirection": "12.5729",
"windletter": "W",
"icon": "FA",
"iconName": "Fair",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "D",
"utcTime": "2018-06-20T13:00:00.00"
,
"temperature": "21",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4739",
"uvIndex": "10",
"totalcloud": "1",
"lowcloud": "1",
"medcloud": "0",
"highcloud": "0",
"humidity": "68",
"windspeed": "9",
"meansealevelpressure": "1018.83",
"windgustspeed": "8",
"winddirection": "10.6461",
"windletter": "N",
"icon": "SU",
"iconName": "Sunny",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "D",
"utcTime": "2018-06-20T14:00:00.00"
,
"temperature": "21",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4765",
"uvIndex": "10",
"totalcloud": "1",
"lowcloud": "1",
"medcloud": "0",
"highcloud": "0",
"humidity": "67",
"windspeed": "9",
"meansealevelpressure": "1018.59",
"windgustspeed": "8",
"winddirection": "9.82178",
"windletter": "N",
"icon": "SU",
"iconName": "Sunny",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "D",
"utcTime": "2018-06-20T15:00:00.00"
,
"temperature": "21",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4797",
"uvIndex": "10",
"totalcloud": "1",
"lowcloud": "1",
"medcloud": "0",
"highcloud": "0",
"humidity": "67",
"windspeed": "9",
"meansealevelpressure": "1018.34",
"windgustspeed": "8",
"winddirection": "9.66212",
"windletter": "N",
"icon": "SU",
"iconName": "Sunny",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "D",
"utcTime": "2018-06-20T16:00:00.00"
,
"temperature": "21",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4826",
"uvIndex": "9",
"totalcloud": "1",
"lowcloud": "1",
"medcloud": "0",
"highcloud": "0",
"humidity": "68",
"windspeed": "9",
"meansealevelpressure": "1017.98",
"windgustspeed": "8",
"winddirection": "8.49407",
"windletter": "N",
"icon": "SU",
"iconName": "Sunny",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "D",
"utcTime": "2018-06-20T17:00:00.00"
,
"temperature": "20",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4844",
"uvIndex": "9",
"totalcloud": "1",
"lowcloud": "1",
"medcloud": "0",
"highcloud": "0",
"humidity": "70",
"windspeed": "9",
"meansealevelpressure": "1017.81",
"windgustspeed": "9",
"winddirection": "8.70691",
"windletter": "N",
"icon": "SU",
"iconName": "Sunny",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "D",
"utcTime": "2018-06-20T18:00:00.00"
,
"temperature": "20",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4857",
"uvIndex": "8",
"totalcloud": "1",
"lowcloud": "1",
"medcloud": "0",
"highcloud": "0",
"humidity": "72",
"windspeed": "10",
"meansealevelpressure": "1017.93",
"windgustspeed": "10",
"winddirection": "10.5324",
"windletter": "N",
"icon": "SU",
"iconName": "Sunny",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "N",
"utcTime": "2018-06-20T19:00:00.00"
,
"temperature": "19",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4872",
"uvIndex": "2",
"totalcloud": "1",
"lowcloud": "1",
"medcloud": "0",
"highcloud": "0",
"humidity": "74",
"windspeed": "10",
"meansealevelpressure": "1018.25",
"windgustspeed": "11",
"winddirection": "13.7294",
"windletter": "NNE",
"icon": "SU",
"iconName": "Sunny",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "N",
"utcTime": "2018-06-20T20:00:00.00"
,
"temperature": "19",
"dewpoint": "15",
"rain": "0",
"freezinglevel": "4889",
"uvIndex": "1",
"totalcloud": "1",
"lowcloud": "1",
"medcloud": "0",
"highcloud": "0",
"humidity": "78",
"windspeed": "11",
"meansealevelpressure": "1018.64",
"windgustspeed": "13",
"winddirection": "17.2073",
"windletter": "NNE",
"icon": "SU",
"iconName": "Sunny",
"chanceofrain": "0",
"chanceofsnow": "0",
"dayOfWeek": "4",
"weekday": "Wednesday",
"sunrise": "6:57",
"sunset": "19:04",
"dayOrNight": "N",
"utcTime": "2018-06-20T21:00:00.00"
,
],
"continent": "",
"country": "",
"location": "28.0/-15.6",
"latitude": 28.0,
"longitude": -15.6,
"timezone": 1
,
"feedCreation": "2018-06-19T23:05:19.00",
"feedCreator": "Metcheck.com",
"feedModel": "GHX2",
"feedModelRun": "12Z",
"feedModelRunInitialTime": "2018-06-19T12:00:00.00",
"feedResolution": "0.01"
我的飞镖代码
@override
Widget build(BuildContext context)
return Scaffold(
appBar: new AppBar(
title: new Text("G.C. - WEATHER"),
centerTitle: true,
backgroundColor: Colors.blue[700],
),
body: new Container(
child: new RefreshIndicator(
onRefresh: _autoRefresh,
child: new ListView(
children: <Widget>[
new FutureBuilder<List<Post>>(
future: fetchPosts(),
builder: (context, snapshot)
if (snapshot.hasData)
List<Post> posts = snapshot.data;
return new Column(
children: posts.map((post) => new Column(
children: <Widget>[
new Text(post.temperature),
],
)).toList()
);
else if(snapshot.hasError)
return snapshot.error;
return new Center(
child: new Column(
children: <Widget>[
new Padding(padding: new EdgeInsets.all(50.0)),
new CircularProgressIndicator(),
],
),
);
,
),
],
),
),
),
);
在我的 DART 代码中发布数据
Future<List<Post>> fetchPosts() async
http.Response response = await http.get('http://ws1.metcheck.com/ENGINE/v9_0/json.asp?lat=28&lon=-15.6&lid=62228&Fc=No');
List responseJson = json.decode(response.body);
return responseJson.map((m) => new Post.fromJson(m)).toList();
class Post
final String temperature, rain, humidity, sunrise, sunset, updateDate;
Post(
this.temperature,
this.rain,
this.humidity,
this.sunrise,
this.sunset,
this.updateDate,
);
factory Post.fromJson(Map<String, dynamic> json)
return new Post(
temperature: json['metcheckData']['forecastLocation']['forecast']['temperature'].toString(),
rain: json['metcheckData']['forecastLocation']['forecast']['rain'].toString(),
humidity:json['metcheckData']['forecastLocation']['forecast']['humidity'].toString(),
sunrise: json['metcheckData']['forecastLocation']['forecast']['sunrise'].toString(),
sunset: json['metcheckData']['forecastLocation']['forecast']['sunset'].toString(),
updateDate: json['metcheckData']['forecastLocation']['forecast']['utcTime'].toString(),
);
【问题讨论】：
【参考方案1】：查看您的 json 和代码后，我发现您的 json 的根不是 JsonArray 而是 JsonObject。您要获取的列表位于['metcheckData']['forecastLocation']['forecast']
在这里，我对您正在运行的代码进行了更改..
Future<List<Post>> fetchPosts() async
http.Response response = await http.get(
'http://ws1.metcheck.com/ENGINE/v9_0/json.asp?lat=28&lon=-15.6&lid=62228&Fc=No');
var responseJson = json.decode(response.body);
return (responseJson['metcheckData']['forecastLocation']['forecast'] as List)
.map((p) => Post.fromJson(p))
.toList();
class Post
final String temperature, rain, humidity, sunrise, sunset, updateDate;
Post(
this.temperature,
this.rain,
this.humidity,
this.sunrise,
this.sunset,
this.updateDate,
);
factory Post.fromJson(Map<String, dynamic> json)
return new Post(
temperature: json['temperature'].toString(),
rain: json['rain'].toString(),
humidity: json['humidity'].toString(),
sunrise: json['sunrise'].toString(),
sunset: json['sunset'].toString(),
updateDate: json['utcTime'].toString(),
);
【讨论】：
【参考方案2】：如果您在速度较慢的设备上运行 fetchPhotos() 函数，您可能会注意到应用在解析和转换 JSON 时会短暂冻结。这是卡顿，您想摆脱它。
您可以通过使用 Flutter 提供的 compute() 函数将解析和转换移动到后台隔离来消除卡顿。 compute() 函数在后台隔离中运行昂贵的函数并返回结果。在这种情况下，请在后台运行parsePhotos() 函数。
Future<List<Photo>> fetchPhotos(http.Client client) async
final response = await client
.get(Uri.parse('https://jsonplaceholder.typicode.com/photos'));
// Use the compute function to run parsePhotos in a separate isolate.
return compute(parsePhotos, response.body);
// A function that converts a response body into a List<Photo>.
List<Photo> parsePhotos(String responseBody)
final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
return parsed.map<Photo>((json) => Photo.fromJson(json)).toList();
创建一个包含照片数据的数据类。包含一个 fromJson() 工厂方法，以便轻松创建以 JSON 对象开头的照片。
class Photo
final int albumId;
final int id;
final String title;
final String url;
final String thumbnailUrl;
Photo(this.albumId, this.id, this.title, this.url, this.thumbnailUrl);
factory Photo.fromJson(Map<String, dynamic> json)
return Photo(
albumId: json['albumId'] as int,
id: json['id'] as int,
title: json['title'] as String,
url: json['url'] as String,
thumbnailUrl: json['thumbnailUrl'] as String,
);
【讨论】：
以上是关于Flutter：从 json 列表中获取数据的主要内容，如果未能解决你的问题，请参考以下文章
Flutter - 无法将所有 json 数据从 api 响应保存到 Iterable List 编辑：（无法从可迭代列表中获取数据）
如何创建一个 Flutter Futurebuilder 函数来显示从 JSON 中获取的字符串数组？
Flutter 使用 BloC 模式从 API 结果中获取列表元素