Flutter/Dart How to GroupBy List of Maps/from Json in Flutter (2023)

In app development. We deal with a list of data this data may come from the API or local database. Sometimes we need to perform some action on this data like sort, group by, etc. So in this article, I am going to share with you How to GroupBy List of Maps/from JSON in Flutter without the use of a third-party package.

 

GroupBy List of Maps in Flutter:

First, we need a map for storing data and performing groupBy on that. So first we take a Map that contains a list of movie details.

var movieDataMap = [
      {"title": 'Raone', "releaseDate": '10/01/2016'},
      {"title": 'Pathan', "releaseDate": '10/01/2023'},
      {"title": 'Animal', "releaseDate": '10/01/2023'},
      {"title": 'Yodha', "releaseDate": '14/02/2023'},
    ];

 

As discussed before we are not using any third-party packages for groping data so we make an extension function that will help to group data. You can see below the extension function.

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 we use the above extension function for grouping. We are going to apply groupBy on the releaseDate. Which will return a List of Map according to releaseDate with grouping. You can see below the piece of the code for grouping the List of Maps.

 final releaseDateMap = movieDataMap.groupBy((data) => data['releaseDate']);

Output:

 {10/01/2016: [{title: Raone, releaseDate: 10/01/2016}], 10/01/2023: [{title: Pathan, releaseDate: 10/01/2023}, {title: Animal, releaseDate: 10/01/2023}], 14/02/2023: [{title: Yodha, releaseDate: 14/02/2023}]}

 

Full code:

import 'package:flutter/material.dart';

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key}) : super(key: key);

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  @override
  void initState() {
    groupByData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        bottom: false,
        child: Scaffold(
          appBar: AppBar(
            title: Text("Errorgram"),
          ),
          body: Center(child: Container()),
        ));
  }

  groupByData() {
    var movieDataMap = [
      {"title": 'Raone', "releaseDate": '10/01/2016'},
      {"title": 'Pathan', "releaseDate": '10/01/2023'},
      {"title": 'Animal', "releaseDate": '10/01/2023'},
      {"title": 'Yodha', "releaseDate": '14/02/2023'},
    ];
    final releaseDateMap = movieDataMap.groupBy((data) => data['releaseDate']);
    print("Grouping Data--->" + releaseDateMap.toString());
  }
}

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));
}

 

Conclusion:

In this post, we saw How to GroupBy List of Maps/from JSON in Flutter step by step without the use of any packages. I hope this post may help you.