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"
}
]
}
