Search code examples
jsonfluttermodelnested

How to retrieve data from List<Map<String, dynamic>> model in DataTable flutter?


let's say I have a model like this ...

class UserModel {
  UserModel({
    required this.data1,
    required this.data2,
    required this.sessions,
  });

  String data1;
  String data2;
  List<Map<String, dynamic>> sessions;
}

and I have variable data like this ...

var userData = [
  UserModel(
    data1: 'Jhon Doe',
    data2: 'Research',
    sessions: [
      {"date": "20 june", "status": "good", "durations": 13},
      {"date": "22 june", "status": "good", "durations": 33},
      {"date": "23 june", "status": "excellent", "durations": 23},
      {"date": "25 june", "status": "good", "durations": 60}
    ],
  ),
  UserModel(
    data1: 'Jean Doe',
    data2: 'Research',
    sessions: [
      {"date": "20 june", "status": "good", "durations": 13},
      {"date": "22 june", "status": "excellent", "durations": 33},
      {"date": "23 june", "status": "excellent", "durations": 23},
      {"date": "25 june", "status": "good", "durations": 60}
    ],
  ),
  UserModel(
    data1: 'Mark Doe',
    data2: 'Resource',
    sessions: [
      {"date": "20 june", "status": "low", "durations": 30},
      {"date": "22 june", "status": "good", "durations": 13},
      {"date": "23 june", "status": "excellent", "durations": 23},
      {"date": "25 june", "status": "good", "durations": 60}
    ],
  ),
];

so, How do I retrieve only all "status" in Map of every User?

I hope you can share the answers, Thanks... cheers

UPDATE!

I tried to implement it in Datatable Flutter this is my full code...

class DetailPage extends StatefulWidget {

  //selected user variable
  final UserModel element;

  const DetailPage({Key? key, required this.element}) : super(key: key);

  @override
  State<DetailPage> createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(...),
      ),
      body: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
        return ListView(
          children: [
            _createDataTable(),
          ],
        );
      }),
    );
  }
}

DataTable _createDataTable() {
  return DataTable(columns: _createColumns(), rows: _createRows());
}

List<DataColumn> _createColumns() {
  return [
    const DataColumn(label: Text('Date')),
    const DataColumn(label: Text('Status')),
    const DataColumn(label: Text('Durations')),
  ];
}

List<DataRow> _createRows() {
  return [
    for (var element in userData) {
      for (var elementSession in element.sessions) {
        DataRow(cells: [
          DataCell(Text(elementSession['date'])),
          DataCell(Text(elementSession['status'])),
          DataCell(Text(elementSession['durations'])),
        ]);
      }
    })
  ];
}

The problem is, The argument type 'List.dynamic.' can't be assigned to the parameter type 'List.DataRow.'.


Solution

  • Thank you for the previous answer so I can figure out the logic and solve the problem by reversing the code, I got the answer to a similar question from StackOverflow.

    hire my working full code :

    class DetailPage extends StatefulWidget {
      //selected user constructor
      final UserModel? elementUser;
    
      const DetailPage({Key? key, this.elementUser}) : super(key: key);
    
      @override
      State<DetailPage> createState() => _DetailPageState();
    }
    
    class _DetailPageState extends State<DetailPage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(...),
          ),
          body: LayoutBuilder(
              builder: (BuildContext context, BoxConstraints constraints) {
            return ListView(
              children: [
                //widget dataTable tag
                _createDataTable(widget.elementUser),
              ],
            );
          }),
        );
      }
    }
    
    _createDataTable(UserModel? elementUser) {
      //List<DataRow> 
      List<DataRow> rows = [];
      
      //generate selected user nested data
      for (var row in elementUser!.sessions) {
        rows.add(
          DataRow(
            cells: [
              DataCell(
                Text(row['date']),
              ),
              DataCell(
                Text(row['status']),
              ),
              DataCell(
                Text(row['durations'].toString()),
              ),
            ],
          ),
        );
      }
      
      //create dataTable
      return DataTable(
        columns: _createColumns(),
        rows: rows,
      );
    }
    
    //List<DataColumn>
    List<DataColumn> _createColumns() {
      return [
        const DataColumn(label: Text('Date')),
        const DataColumn(label: Text('Status')),
        const DataColumn(label: Text('Durations')),
      ];
    }