So I try the code from following stack overflow answer How to populate DataTable with JSON API in flutter, and changed that as per my need but DataTable is not populated and displaying my error message "No data found...". I'm adding whatever I've tried so, it will be easy whoever have worked with DataTable in past.
Thank you in advance.
List applicants = [];
String applicantsByDate = "http://localhost:3000/applicants/getApplicantsByDate";
DataRow _resultsAPI(index, data) {
return DataRow(
cells: <DataCell>[
DataCell(
Text(
data['id'],
),
), //add name of your columns here
DataCell(
Text(
data['firstName'],
),
),
DataCell(
Text(
data['lastName'],
),
),
DataCell(
Text(
data['createdAt'],
),
)
],
);
}
Future<List?> fetchApplicants() async {
http.Response response = await http.get(Uri.parse(applicantsByDate));
if (response.statusCode == 200) {
var data = jsonDecode(response.body);
setState(() {
applicants = data['applicantsByDate'];
});
return jsonDecode(response.body);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
leading: Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
child: Image.asset(
"images/Logo.png",
fit: BoxFit.cover,
height: 20.00,
width: 20.00),
),
leadingWidth: 130,
title: const Text('Applicants'),
),
body: SingleChildScrollView(
child: SafeArea(
child: Container(
padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
child: FutureBuilder(
future: fetchApplicants(),
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
if (snapshot.hasData) {
applicants = snapshot.data;
if (applicants.length != 0) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const SizedBox(
height: 30.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
DataTable(
columns: const [
DataColumn(
label: Text(
'ID',
style: TextStyle(
color: Palette.coloresCRC,
fontWeight: FontWeight.w600,
fontSize: 18),
),
),
DataColumn(
label: Text(
'First Name',
style: TextStyle(
color: Palette.coloresCRC,
fontWeight: FontWeight.w600,
fontSize: 18),
),
),
DataColumn(
label: Text(
'Last Name',
style: TextStyle(
color: Palette.coloresCRC,
fontWeight: FontWeight.w600,
fontSize: 18),
),
),
DataColumn(
label: Text(
'Date Applied',
style: TextStyle(
color: Palette.coloresCRC,
fontWeight: FontWeight.w600,
fontSize: 18),
),
),
],
rows: List.generate(
applicants.length,
(index) => _resultsAPI(
index,
applicants[index],
),
),
),
],
),
),
],
),
],
);
} else {
return Row(
children: const <Widget>[
SizedBox(
// ignore: sort_child_properties_last
child: CircularProgressIndicator(),
width: 30,
height: 30,
),
Padding(
padding: EdgeInsets.all(40),
child: Text('No Data Found...'),
),
],
);
}
} else {
return Row(
children: const <Widget>[
SizedBox(
// ignore: sort_child_properties_last
child: CircularProgressIndicator(),
width: 30,
height: 30,
),
Padding(
padding: EdgeInsets.all(40),
child: Text('No Data Found...'),
),
],
);
}
},
),
),
),
),
);
}
}
EDIT: Here is what Im getting from my API call, it works as it should
{
"applicantsByDate": [
{
"id": 1007,
"firstName": "Andrea",
"lastName": "Savillon",
"createdAt": "2022-12-14T19:58:57.431Z"
},
{
"id": 1006,
"firstName": "Emily",
"lastName": "Savillon",
"createdAt": "2022-12-14T19:56:42.795Z"
},
{
"id": 1005,
"firstName": "Andres",
"lastName": "Abadie",
"createdAt": "2022-12-14T19:54:03.424Z"
},
{
"id": 1004,
"firstName": "Carlos",
"lastName": "Marroquin",
"createdAt": "2022-12-14T18:05:42.157Z"
},
{
"id": 1003,
"firstName": "Sara",
"lastName": "Savillon",
"createdAt": "2022-12-14T18:03:41.343Z"
},
{
"id": 1002,
"firstName": "Alexander",
"lastName": "Savillon",
"createdAt": "2022-12-14T17:28:38.909Z"
},
{
"id": 2,
"firstName": "Miguel",
"lastName": "Madrid",
"createdAt": "2022-12-13T21:59:48.593Z"
},
{
"id": 1,
"firstName": "Eder",
"lastName": "Savillon",
"createdAt": "2022-12-13T14:54:42.118Z"
}
]
}
There are somethings that I would change in your code and yor API response:
In your API response, this record has another structure: "primerNombre" y "primerApellido"
Another important point is the return of your
fetchApplicants()function, why would you process the data and return the raw? and your FutureBuilder is especting a List not a Map(data).}
In the
_resultsAPIfunction you must retrieve a String for the content of theText()widget so you should use:data['id'].toString()I've copied your string to locally and make it work:
The full code should look something like this: