Flutter Http Request remove duplicates from JSON response

455

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());
    },
  ));
}
}
Share:
455
lazydev
Author by

lazydev

Updated on December 25, 2022

Comments

  • lazydev
    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
    lazydev over 3 years
    Exactly what I was looking for. Thank you.