如何使用 from json model json api respons flutter 在 DataTable 中创建行数据

Question

我正在尝试将 json 数据提取到 Flutter DataTable 中。使用 Api 和员工模型。我能够对从浏览器获取的 json 数据进行 ftech。我无法将行提取到 DataTable 中。出现以下错误：

LateInitializationError: Field'emps' has not been initialized.

我遇到无法将值放入行中的问题。如何将值调用到行中。请帮帮我怎么办？

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.empname.toString()),
                    ),
                    DataCell(
                      Text(emp.empname),
                    ),
                    DataCell(
                      Text(emp.empemail),
                    ),
                  ]);
                },
              ).toList(),
            );
          },
        ),
      ),
    );
  }
}

Answer 2

我得到的解决方案如下： API 是：

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

页面示例是：

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(),
                );
              },
            ),
          ],
        ),
      ),
    );
  }}

如何使用 from json model json api respons flutter 在 DataTable 中创建行数据

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

datatable

json

dart

flutter