How to create rows data in to DataTable using from json model json api respons flutter

Question

I am tryieng to fetch json data into the Flutter DataTable. Using Api and employee Model. I am able to ftech the json data getting from Browser. I am unable to fetch rows into DataTable. Getting an error below:

LateInitializationError: Field'emps' has not been initialized.

I am facing an issue that unable to getting the values in to the rows. How to call values into the rows. Please help me How to do?

Below is the json data getting from Browser:

[{"empid":1,"empname":"empname","empemail":"email1"},{"empid":2,"empname":"name2","empemail":"email2"},{"empid":3,"empname":"t1","empemail":"e1"},{"empid":7,"empname":"t2","empemail":"e2"}]

Below is the API:

import 'package:http/http.dart' as http;
import 'employees_model.dart';

Future<List> fetchEmployees() async {
  Uri url = Uri.parse(" Link ");
  final response = await http.get(url);
  return employeesFromJson(response.body);
}

Below is employeemodel:

import 'dart:convert';

List<Employees> employeesFromJson(String str) =>
    List<Employees>.from(json.decode(str).map((x) => Employees.fromJson(x)));

String employeesToJson(List<Employees> data) =>
    json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class Employees {
  Employees({
    required this.id,
    required this.name,
    required this.email,
  });

  int id;
  String name;
  String email;

  factory Employees.fromJson(Map<String, dynamic> json) => Employees(
        id: json["empid"],
        name: json["empname"],
        email: json["empemail"],
      );

  Map<String, dynamic> toJson() => {
        "empid": id,
        "empname": name,
        "empemail": email,
      };
}

Below is my example code:

import 'package:flutter/material.dart';
import 'package:webappmysql/employees_model.dart';
import 'package:webappmysql/employees_api.dart';

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

  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  late List<Employees> emps;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Fetch Data Table Example'),
      ),
      body: SingleChildScrollView(
        child: DataTable(
          columns: const [
            DataColumn(label: Text('ID')),
            DataColumn(label: Text('Name')),
            DataColumn(label: Text('Email')),
          ],
          rows: emps
              .map(
                (emp) => DataRow(cells: [
                  DataCell(
                    Text(emp.id.toString()),
                  ),
                  DataCell(
                    Text(emp.name),
                  ),
                  DataCell(
                    Text(emp.email),
                  ),
                ]),
              )
              .toList(),
        ),
      ),

    );
  }
} 

Answer 1

Future<List<Employee>> fetchResults() async {
    List<Employee> _results = [];
    var url ="---your link----";
    var response = await http.get(url);
    if (response.statusCode == 200) {
      var resultsJson = json.decode(response.body).cast<Map<String,dynamic>>();
      await Future.forEach(resultsJson, (element) {
        _results.add(Employee.fromJson(element));
      });
    }

    return Future.value(_results);
  }



class Employee {
  int? empid;
  String? empname;
  String? empemail;

  Employee({this.empid, this.empname, this.empemail});

  Employee.fromJson(Map<String, dynamic> json) {
    empid = json['empid'];
    empname = json['empname'];
    empemail = json['empemail'];
  }

Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['empid'] = this.empid;
    data['empname'] = this.empname;
    data['empemail'] = this.empemail;
    return data;
  }
}


class _TestPageState extends State<TestPage> {
  late List<Employees> emps;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Fetch Data Table Example'),
      ),
      body: SingleChildScrollView(
        child: FutureBuilder<List<Employee>>(
          initialData: <Employee>[],
          future: fetchResults(),
          builder: (context, snapshot) {
            if (snapshot.hasError ||
                snapshot.data == null ||
                snapshot.connectionState == ConnectionState.waiting) {
              return const CircularProgressIndicator();
            }

            return DataTable(
              columns: const [
                DataColumn(label: Text('ID')),
                DataColumn(label: Text('Name')),
                DataColumn(label: Text('Email')),
              ],
              rows: List.generate(
                snapshot.data!.length,
                (index) {
                  var emp = snapshot.data![index];
                  return DataRow(cells: [
                    DataCell(
                      Text(emp.id.toString()),
                    ),
                    DataCell(
                      Text(emp.name),
                    ),
                    DataCell(
                      Text(emp.email),
                    ),
                  ]);
                },
              ).toList(),
            );
          },
        ),
      ),
    );
  }
}

Answer 2

I got the solution as below: The API is:

Future<List<Employees>> fetchResults() async {
  Uri url = Uri.parse(" Link ");
  var response = await http.get(url);
  var resultsJson = json.decode(response.body).cast<Map<String, dynamic>>();
  List<Employees> emplist = await resultsJson
      .map<Employees>((json) => Employees.fromJson(json))
      .toList();
  return emplist;
}

The Page Example is:

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

  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Fetch Data Table Example'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            FutureBuilder<List<Employees>>(
              initialData: const <Employees>[],
              future: fetchResults(),
              builder: (context, snapshot) {
                if (snapshot.hasError ||
                    snapshot.data == null ||
                    snapshot.connectionState == ConnectionState.waiting) {
                  return const CircularProgressIndicator();
                }

                return DataTable(
                  columns: const [
                    DataColumn(label: Text('ID')),
                    DataColumn(label: Text('Name')),
                    DataColumn(label: Text('Email')),
                  ],
                  rows: List.generate(
                    snapshot.data!.length,
                    (index) {
                      var emp = snapshot.data![index];
                      return DataRow(cells: [
                        DataCell(
                          Text(emp.id.toString()),
                        ),
                        DataCell(
                          Text(emp.name),
                        ),
                        DataCell(
                          Text(emp.email),
                        ),
                      ]);
                    },
                  ).toList(),
                );
              },
            ),
          ],
        ),
      ),
    );
  }}