How to Use GroupBy List of Maps in Dart?

4 min read
How to Use GroupBy List of Maps in Dart
How to Use GroupBy List of Maps in Dart

When the user gets a response in a list format from the backend and to we need to display that data in a required format or structure as per the end-user requirement. So in today’s article, we will go through How to Use GroupBy List of Maps in Dart.

Are you ready for the same? Let’s jump right into it 馃檪

How to Use GroupBy List of Maps in Dart??

Consider a case where the user is getting a response from a backend like the below:

[
    {title: 'Avengers', release_date: '10/01/2019'},
    {title: 'Creed', release_date: '10/01/2019'}
    {title: 'Jumanji', release_date: '30/10/2019'},
]

If the user wants to short data by release_date聽 like a below:

[
   {
      "10/01/2019": [
         {
            "title": "Avengers"
         },
         {
            "title": "Creed"
         }
      ]
   },
   {
      "30/10/2019": [
         {
            "title": "Jumanji"
         }
      ]
   }
]

The package collection implements the groupBy function.

1. For grouping by date:

import "package:collection/collection.dart";

main(List<String> args) {
  var data = [
    {"title": 'Avengers', "release_date": '10/01/2019'},
    {"title": 'Creed', "release_date": '10/01/2019'},
    {"title": 'Jumanji', "release_date": '30/10/2019'},
  ];


  var newMap = groupBy(data, (obj) => obj['release_date']);

  print(newMap);
}

2. For removing the release_date key from each map entry:

var newMap = groupBy(data, (obj) => obj['release_date']).map(
    (k, v) => MapEntry(k, v.map((item) { item.remove('release_date'); return item;}).toList()));

3. For changing a key:

var newMap = groupBy(data, (obj) => obj['release_date']).map(
    (k, v) => MapEntry(k, v.map((item) => {'name': item['title']}).toList()));

If you have Dart 2.7, you can extend Iterable to add a useful groupBy method:

extension Iterables<E> on Iterable<E> {
  Map<K, List<E>> groupBy<K>(K Function(E) keyFunction) => fold(
      <K, List<E>>{},
      (Map<K, List<E>> map, E element) =>
          map..putIfAbsent(keyFunction(element), () => <E>[]).add(element));
}

Now, your List of Maps could be grouped using something like:

final releaseDateMap = listOfMaps.groupBy((m) => m['release_date'])

Data like this:

[
    {title: 'Avengers', release_date: '10/01/2019'},
    {title: 'Creed', release_date: '10/01/2019'}
    {title: 'Jumanji', release_date: '30/10/2019'},
]

would turn into:

{
  '10/01/2019': [
    {title: 'Avengers', release_date: '10/01/2019'},
    {title: 'Creed', release_date: '10/01/2019'}
  ],
  '30/10/2019': [
    {title: 'Jumanji', release_date: '30/10/2019'},
  ]
}

Using the supercharged package, you’d write it like this:

List list = [
  { title: 'Avengers', release_date: '10/01/2019' },
  { title: 'Creed', release_date: '10/01/2019' }
  { title: 'Jumanji', release_date: '30/10/2019' },
];

final map = list.groupBy<String, Map>((item) => 
  item['release_date'],
  valueTransform: (item) => item..remove('release_date'),
);

Conclusion:

Thanks for being with us on a Flutter Journey !!!

So in this article, we have been through how to Use GroupBy List of Maps in Dart.

Keep Learning!!! Keep Fluttering!!!

Do let us know if you need any assistance with flutter development!! we would love to assist you.

Flutter Agency聽is our portal Platform dedicated to Flutter Technology and聽Flutter Developers. The portal is full of cool resources from Flutter like聽Flutter Widget聽Guide,聽Flutter Projects,聽Code libs聽and etc.

Flutter Agency聽is one of the most popular online portals dedicated to聽Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of聽Flutter Development.

Leave a Reply