Flutter Http Request remove duplicates from JSON response
Assuming you only want the name of drivers you could do something like iterate through the list and add the names on to another list if it doesn't exist
class PostsPage extends StatelessWidget {
final HttpService httpService = HttpService();
List<String> getDrivers(List<Post> posts) {
List<String> res = [];
posts.forEach((e) => if(!res.contains(e.driver)) res.add(e.driver));
return res;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Orders"),
),
body: FutureBuilder(
future: httpService.getPosts(),
builder: (BuildContext context, AsyncSnapshot<List<Post>> snapshot){
if(snapshot.hasData){
List<Post> posts = snapshot.data;
List<String> drivers = getDrivers(posts);
return ListView(
children: drivers
.map(
(driver) => ListTile(
title: Text(driver),
trailing: Icon(Icons.keyboard_arrow_right),
),
)
.toList(),
);
}
return Center(
child: CircularProgressIndicator());
},
));
}
}
lazydev
Updated on December 25, 2022Comments
-
lazydev over 1 year
I have followed the tutorial https://www.digitalocean.com/community/tutorials/flutter-flutter-http to make an app that sends a get request to an API endpoint and returns a JSON response.
The JSON response look like this:
[{"Order":"order1","Driver":"Driver1","Company":"Company1","Address":"Address1"},{"Order":"order2","Driver":"Driver1","Company":"Company2","Address":"Address2"},{"Order":"order3","Driver":"Driver1","Company":"Company3","Address":"Address3"},{"Order":"order4","Driver":"Driver1","Company":"Cpmpany4","Address":"Address4"},{"Order":"order5","Driver":"Driver1","Company":"Company5","Address":"Address5"},{"Order":"order6","Driver":"Driver2","Company":"Company6","Address":"Address6"},{"Order":"order7","Driver":"Driver2","Company":"Company7","Address":"Address7"},{"Order":"order8","Driver":"Driver2","Company":"Company8","Address":"Address8"},{"Order":"order9","Driver":"Driver2","Company":"Company9","Address":"Address9"},{"Order":"order10","Driver":"Driver2","Company":"Company10","Address":"Address10"},{"Order":"ord0439506","Driver":"Driver3","Company":"Company11","Address":"Address11"},{"Order":"ord0439517","Driver":"Driver3","Company":"Company12","Address":"Address12"},{"Order":"ord0439508","Driver":"Driver3","Company":"Company13","Address":"Address13"}]
http_service.dart
class HttpService { final String postsURL = "https://myapi:8080/getOrders"; Future<List<Post>> getPosts() async { Response res = await get(postsURL); if (res.statusCode == 200) { List<dynamic> body = jsonDecode(res.body); List<Post> posts = body .map( (dynamic item) => Post.fromJson(item),).toList(); ) .toList(); return posts; } else { throw "Can't get posts."; } } }
posts_model.dart
import 'package:flutter/foundation.dart'; class Post { final String order; final String driver; final String company; final String address; Post({ @required this.order, @required this.driver, @required this.company, @required this.address, }); factory Post.fromJson(Map<String, dynamic> json) { return Post( order: json['Order'] as String, id: json['Driver'] as String, title: json['Company'] as String, body: json['Address'] as String, ); } }
posts.dart
class PostsPage extends StatelessWidget { final HttpService httpService = HttpService(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Orders"), ), body: FutureBuilder( future: httpService.getPosts(), builder: (BuildContext context, AsyncSnapshot<List<Post>> snapshot){ if(snapshot.hasData){ List<Post> posts = snapshot.data; return ListView( children: posts .map( (Post post) => ListTile( title: Text(post.driver), trailing: Icon(Icons.keyboard_arrow_right), ), ) .toList(), ); } return Center( child: CircularProgressIndicator()); }, )); } }
main.dart
void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'HTTP', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, home: PostsPage(), ); } }
When the app completes the post request to my API, it will display the drivers as
- Driver 1
- Driver 1
- Driver 1
- Driver 1
- Driver 2
- Driver 2
- Driver 2
- Driver 2
- Driver 3
- Driver 3
- Driver 3
I want the view to display each driver only once, no duplicates as such
- Driver 1
- Driver 2
- Driver 3
From research, most say to turn the list into a set and I've tried in posts.dart adding a .toSet() to .toList() but the duplicates were still displayed. I've been messing around with this for a bit but still can't figure this out. Any help would be greatly appreciated.
-
lazydev over 3 yearsExactly what I was looking for. Thank you.