Flutter: How to load JSON into a PageView - flutter

Question

I'm hoping someone can tell me how to load JSON in to a PageView. Each page in the PageView will contain a ListView which will use Card widgets to display each Job from the JSON.
The JOB_DATE will dictate which page the job is displayed on. So in the JSON below, the first 3 items are on one date and the next 2 items are on the following date. So page 1 should display the first 3 items and page 2 should display items 4 & 5.
JSON :
{
"rows":[
{ "JOBID":23, "JOB_DATE":1588809600000, "START_TIME":"07:30", "JOB_NAME":"Cleaner" },
{ "JOBID":24, "JOB_DATE":1588809600000, "START_TIME":"08:30", "JOB_NAME":"Manager" }
{ "JOBID":25, "JOB_DATE":1588809600000, "START_TIME":"12:30", "JOB_NAME":"Caretaker" }
{ "JOBID":26, "JOB_DATE":1588896000000, "START_TIME":"08:30", "JOB_NAME":"Manager" }
{ "JOBID":27, "JOB_DATE":1588896000000, "START_TIME":"13:30", "JOB_NAME":"Caretaker" }
]
}
How would I code this to split the JSON up to the different pages?
Thanks heaps for any help.
Cheers,
Paul

Answer 1

You can you groupBy function from 'package:collection/collection.dart'
var json = {
"rows":[
{ "JOBID":23, "JOB_DATE":1588809600000, "START_TIME":"07:30", "JOB_NAME":"Cleaner" },
{ "JOBID":24, "JOB_DATE":1588809600000, "START_TIME":"08:30", "JOB_NAME":"Manager" }
{ "JOBID":25, "JOB_DATE":1588809600000, "START_TIME":"12:30", "JOB_NAME":"Caretaker" }
{ "JOBID":26, "JOB_DATE":1588896000000, "START_TIME":"08:30", "JOB_NAME":"Manager" }
{ "JOBID":27, "JOB_DATE":1588896000000, "START_TIME":"13:30", "JOB_NAME":"Caretaker" }
]
}
List<Map<String, dynamic> rows = json['rows']
Map<dynamic, List<Map<String, dynamic>> sortedRow = groupBy(rows, (row) => row['JOB_DATE']
And you will have a map where keys are (1588809600000, 1588896000000) and values are lists of your objects.
After that you can create PageView with a ListView of your objects

Answer 2

I would use something like this Json to dart class converter to quickly get a dart class for you JSON data structure. Then I would use the resulting dart class to parse your Json into a list of jobs in dart and then use that list on a specific page's ListView data source by only selecting the values with the specific sTARTTIME value you want to display on that page.
class Job {
List<Rows> rows;
Job({this.rows});
Job.fromJson(Map<String, dynamic> json) {
if (json['rows'] != null) {
rows = new List<Rows>();
json['rows'].forEach((v) {
rows.add(new Rows.fromJson(v));
});
}
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
if (this.rows != null) {
data['rows'] = this.rows.map((v) => v.toJson()).toList();
}
return data;
}
}
class Rows {
int jOBID;
int jOBDATE;
String sTARTTIME;
String jOBNAME;
Rows({this.jOBID, this.jOBDATE, this.sTARTTIME, this.jOBNAME});
Rows.fromJson(Map<String, dynamic> json) {
jOBID = json['JOBID'];
jOBDATE = json['JOB_DATE'];
sTARTTIME = json['START_TIME'];
jOBNAME = json['JOB_NAME'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['JOBID'] = this.jOBID;
data['JOB_DATE'] = this.jOBDATE;
data['START_TIME'] = this.sTARTTIME;
data['JOB_NAME'] = this.jOBNAME;
return data;
}
}
You can parse our JSON like this in your flutter app:
import 'dart:convert';
...
Job jobs = Job.fromJson(json.decode(jsonString));
...
final firstPageData = jobs.rows.where((row) => row.jOBDATE == 1588809600000).toList();
final secondPageData = jobs.rows.where((row) => row.jOBDATE == 1588896000000).toList();