how to implement json array nested in ui flutter - flutter

Question

How can I parse json array nested object to ListView in UI using Flutter?
The API response is
{
"responseCode": "0000",
"responseMessage": "Success",
"date": "20200227",
"time": "115221",
"content": [
{
"postingDate": "20191203",
"valueDate": "20191203",
"inputDate": "20191203",
"inputTime": "214808",
"desc": "BUNGA JATUH TEMPO"
},
]
}
Can you please help me? Thanks a lot!

Answer 1

Just check out this example where I have parsed you JSON locally :
{
"responseCode": "0000",
"responseMessage": "Success",
"date": "20200227",
"time": "115221",
"content": [
{
"postingDate": "20191203",
"valueDate": "20191203",
"inputDate": "20191203",
"inputTime": "214808",
"desc": "BUNGA JATUH TEMPO",
"noReff": "B2100000000026",
"amount": "+20712,33",
"balance": "+6971357445,15"
},
{
"postingDate": "20191203",
"valueDate": "20191203",
"inputDate": "20191203",
"inputTime": "214809",
"desc": "BUNGA JATUH TEMPO",
"noReff": "B2100000000033",
"amount": "+13808,22",
"balance": "+6971371253,37"
}
]
}
below is the model class for the json that you provided.
// To parse this JSON data, do
//
// final myModel = myModelFromJson(jsonString);
import 'dart:convert';
MyModel myModelFromJson(String str) => MyModel.fromJson(json.decode(str));
String myModelToJson(MyModel data) => json.encode(data.toJson());
class MyModel {
String responseCode;
String responseMessage;
String date;
String time;
List<Content> content;
MyModel({
this.responseCode,
this.responseMessage,
this.date,
this.time,
this.content,
});
factory MyModel.fromJson(Map<String, dynamic> json) => MyModel(
responseCode: json["responseCode"],
responseMessage: json["responseMessage"],
date: json["date"],
time: json["time"],
content: List<Content>.from(json["content"].map((x) => Content.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"responseCode": responseCode,
"responseMessage": responseMessage,
"date": date,
"time": time,
"content": List<dynamic>.from(content.map((x) => x.toJson())),
};
}
class Content {
String postingDate;
String valueDate;
String inputDate;
String inputTime;
String desc;
String noReff;
String amount;
String balance;
Content({
this.postingDate,
this.valueDate,
this.inputDate,
this.inputTime,
this.desc,
this.noReff,
this.amount,
this.balance,
});
factory Content.fromJson(Map<String, dynamic> json) => Content(
postingDate: json["postingDate"],
valueDate: json["valueDate"],
inputDate: json["inputDate"],
inputTime: json["inputTime"],
desc: json["desc"],
noReff: json["noReff"],
amount: json["amount"],
balance: json["balance"],
);
Map<String, dynamic> toJson() => {
"postingDate": postingDate,
"valueDate": valueDate,
"inputDate": inputDate,
"inputTime": inputTime,
"desc": desc,
"noReff": noReff,
"amount": amount,
"balance": balance,
};
// remove this method from the model
static Future<MyModel> getMutasiDetails(String accNumber, String startDate, String endDate) async {
String apiURL = urlAPI";
String username = "username";
String password = "password";
var bytes = utf8.encode("$username:$password");
var credentials = base64.encode(bytes);
var headers = {
"Content-Type": "application/json",
"Authorization": "Basic $credentials"
};
var params = Map<String, dynamic>();
params['accNumber'] = accNumber;
params['startDate'] = startDate;
params['endDate'] = endDate;
http.Response apiResult =
await http.post(apiURL, body: params, headers: headers);
if (apiResult.statusCode == 200) {
return MyModel.fromJson(json.decode(apiResult.body));
} else {
throw Exception('failed to load data');
}
}
}
And below is the main file where the listview gets rendered:
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:sample_project_for_api/model.dart';
import 'package:http/http.dart' as http;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
MyModel youModel = new MyModel();
bool _isLoading = false;
#override
void initState() {
super.initState();
getMutasiDetails("0002100000291", "", "").then((value) {
youModel = value;
setState(() {
_isLoading = false;
});
});
}
Future<MyModel> getMutasiDetails(
String accNumber, String startDate, String endDate) async {
setState(() {
_isLoading = true;
});
String apiURL = "urlAPI";
String username = "username";
String password = "password";
var bytes = utf8.encode("$username:$password");
var credentials = base64.encode(bytes);
var headers = {
"Content-Type": "application/json",
"Authorization": "Basic $credentials"
};
var params = Map<String, dynamic>();
params['accNumber'] = accNumber;
params['startDate'] = startDate;
params['endDate'] = endDate;
http.Response apiResult =
await http.post(apiURL, body: params, headers: headers);
if (apiResult.statusCode == 200) {
return myModelFromJson(apiResult.body);
} else {
throw Exception('failed to load data');
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: _isLoading
? CircularProgressIndicator()
: Container(
child: ListView.builder(
itemCount: youModel.content.length,
itemBuilder: (context, i) {
return Card(
child: Column(
children: <Widget>[
Text(youModel.content[i].amount),
Text(youModel.content[i].balance),
Text(youModel.content[i].inputDate),
Text(youModel.content[i].desc),
],
),
);
})),
);
}
}

Answer 2

First you could take a look at this resource:
https://bezkoder.com/dart-flutter-parse-json-string-array-to-object-list/#DartFlutter_parse_complex_JSON_into_Nested_Object
It will give you a better understanding of the parsing you're trying to do.
Then take a look at this another post:
https://pusher.com/tutorials/flutter-listviews
It will give an idea of how to handle ListViews properly

Answer 3

List<MyModel> list=[];
var requestBody = jsonEncode({'accNumber': accNumber});
http.Response response = await http.post(apiURL, body: requestBody, headers: headers);
if (response.statusCode == 200) {
var data = json.decode(response.body);
print(data);
for (Map<String,dynamic> m in data['content']){
list.add(MyModel.fromJSON(m));
//Replace above line with your model implemtation
}
);
}