Flutter (Dart) 循环 JSON 结果 - .length returns 0
Flutter (Dart) Looping through JSON results - .length returns 0
我是 flutter 的新手,在取得一些良好进展后,我认为应该是一个简单的循环。我能够显示来自 json 的单个结果,但无法显示所有结果。
for(var i = 0; i < snapshot.data.posts.length; i++){
return Text(snapshot.data.posts[i].name + " - " + snapshot.data.posts[i].id + " - " + i.toString());
}
如此编码 returns 并输出数据集的第一个结果。
Mr. Nice - 1 - 0
问题是我无法让它输出数据集中的其余结果。我正在解析的外部 JSON 内容如下(完整)
[{"id":1,"name":"Mr. Nice"},{"id":2,"name":"Narco"},{"id":3,"name":"Bombasto"},{"id":4,"name":"Celeritas"},{"id":5,"name":"Magneta"},{"id":6,"name":"Super Adueduct"},{"id":7,"name":"Mr. Test"}]
这个完整的flutter页面(已经分出自己的路由)如下:
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
Future<PostsList> fetchPostsList() async {
final response =
await http.get('http://localhost:8888/heroes');
if (response.statusCode == 200) {
return PostsList.fromJson(json.decode(response.body));
} else {
throw Exception('Failed to load post');
}
}
class PostsList {
final List<Post> posts;
PostsList({
this.posts,
});
factory PostsList.fromJson(List<dynamic> parsedJson) {
List<Post> posts = new List<Post>();
posts = parsedJson.map((i)=>Post.fromJson(i)).toList();
return new PostsList(
posts: posts
);
}
}
class Post{
final String id;
final String name;
Post({
this.id,
this.name
});
factory Post.fromJson(Map<String, dynamic> json){
return new Post(
id: json['id'].toString(),
name: json['name'],
);
}
}
class HeroesPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fetch Data Example',
home: Scaffold(
appBar: AppBar(
title: Text('Fetch Data Example'),
),
body: Center(
child: FutureBuilder<PostsList>(
future: fetchPostsList(),
builder: (context, snapshot) {
if (snapshot.hasData) {
for(var i = 0; i < snapshot.data.posts.length; i++){
return Text(snapshot.data.posts[i].name + " - " +
snapshot.data.posts[i].id + " - " + i.toString());
}
//return Text(snapshot.data.posts[1].name);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
// By default, show a loading spinner
return CircularProgressIndicator();
},
),
),
),
);
}
现在我可能要显示简单的 api 数据全错了,很难找到使用 flutter 和 api 的非 firebase 教程。
仅供参考 - 本地主机上的 API 运行 是按照本教程使用 Aqueduct 设置的:https://aqueduct.io/docs/tut/getting-started/
代码和分类基于 Flutter 文档教程(但针对我的 json 结构略作修改):https://flutter.io/cookbook/networking/fetch-data/
你真的很接近!问题是 return 在 FutureBuilder builder
函数内的 for 循环中。 return 在第一次迭代后跳出循环,因此您只会获得数据的第一个元素。
相反,您需要生成数据中所有小部件的列表,然后然后 return 列表。
我能想到的两种可能的方法来解决这个问题(取决于您想要的显示小部件):
=> 使用 ListView.builder 为您处理迭代:
if (snapshot.hasData) {
List<Post> yourPosts = snapshot.data.posts;
return ListView.builder(
itemCount: yourPosts.length,
itemBuilder: (BuildContext context, int index) {
// Whatever sort of things you want to build
// with your Post object at yourPosts[index]:
return Text(yourPosts[index].toString());
}
);
}
=> 构建一个 List<Widget>
和 return 一个专栏(最接近您原来的方法):
if (snapshot.hasData) {
List <Widget> myPosts;
for(var i = 0; i < snapshot.data.posts.length; i++){
myPosts.add(Text(snapshot.data.posts[i].name + " - " +
snapshot.data.posts[i].id + " - " + i.toString())
);
}
return Column( children: myPosts );
}
我是 flutter 的新手,在取得一些良好进展后,我认为应该是一个简单的循环。我能够显示来自 json 的单个结果,但无法显示所有结果。
for(var i = 0; i < snapshot.data.posts.length; i++){
return Text(snapshot.data.posts[i].name + " - " + snapshot.data.posts[i].id + " - " + i.toString());
}
如此编码 returns 并输出数据集的第一个结果。
Mr. Nice - 1 - 0
问题是我无法让它输出数据集中的其余结果。我正在解析的外部 JSON 内容如下(完整)
[{"id":1,"name":"Mr. Nice"},{"id":2,"name":"Narco"},{"id":3,"name":"Bombasto"},{"id":4,"name":"Celeritas"},{"id":5,"name":"Magneta"},{"id":6,"name":"Super Adueduct"},{"id":7,"name":"Mr. Test"}]
这个完整的flutter页面(已经分出自己的路由)如下:
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
Future<PostsList> fetchPostsList() async {
final response =
await http.get('http://localhost:8888/heroes');
if (response.statusCode == 200) {
return PostsList.fromJson(json.decode(response.body));
} else {
throw Exception('Failed to load post');
}
}
class PostsList {
final List<Post> posts;
PostsList({
this.posts,
});
factory PostsList.fromJson(List<dynamic> parsedJson) {
List<Post> posts = new List<Post>();
posts = parsedJson.map((i)=>Post.fromJson(i)).toList();
return new PostsList(
posts: posts
);
}
}
class Post{
final String id;
final String name;
Post({
this.id,
this.name
});
factory Post.fromJson(Map<String, dynamic> json){
return new Post(
id: json['id'].toString(),
name: json['name'],
);
}
}
class HeroesPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fetch Data Example',
home: Scaffold(
appBar: AppBar(
title: Text('Fetch Data Example'),
),
body: Center(
child: FutureBuilder<PostsList>(
future: fetchPostsList(),
builder: (context, snapshot) {
if (snapshot.hasData) {
for(var i = 0; i < snapshot.data.posts.length; i++){
return Text(snapshot.data.posts[i].name + " - " +
snapshot.data.posts[i].id + " - " + i.toString());
}
//return Text(snapshot.data.posts[1].name);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
// By default, show a loading spinner
return CircularProgressIndicator();
},
),
),
),
);
}
现在我可能要显示简单的 api 数据全错了,很难找到使用 flutter 和 api 的非 firebase 教程。
仅供参考 - 本地主机上的 API 运行 是按照本教程使用 Aqueduct 设置的:https://aqueduct.io/docs/tut/getting-started/
代码和分类基于 Flutter 文档教程(但针对我的 json 结构略作修改):https://flutter.io/cookbook/networking/fetch-data/
你真的很接近!问题是 return 在 FutureBuilder builder
函数内的 for 循环中。 return 在第一次迭代后跳出循环,因此您只会获得数据的第一个元素。
相反,您需要生成数据中所有小部件的列表,然后然后 return 列表。
我能想到的两种可能的方法来解决这个问题(取决于您想要的显示小部件):
=> 使用 ListView.builder 为您处理迭代:
if (snapshot.hasData) {
List<Post> yourPosts = snapshot.data.posts;
return ListView.builder(
itemCount: yourPosts.length,
itemBuilder: (BuildContext context, int index) {
// Whatever sort of things you want to build
// with your Post object at yourPosts[index]:
return Text(yourPosts[index].toString());
}
);
}
=> 构建一个 List<Widget>
和 return 一个专栏(最接近您原来的方法):
if (snapshot.hasData) {
List <Widget> myPosts;
for(var i = 0; i < snapshot.data.posts.length; i++){
myPosts.add(Text(snapshot.data.posts[i].name + " - " +
snapshot.data.posts[i].id + " - " + i.toString())
);
}
return Column( children: myPosts );
}