How to display Nested api data using model class in listview in Flutter? - flutter

Question

I am tried to display data in listview.
I have Json Response as below.
[
{
"success": 1,
"subject": [
{
"subject_id": "5e32874c714fa",
"subject_name": "Account",
"image": "upload/subject/Account.png",
"active": "1",
"standard_id": "5d1594e283e1a",
"medium_id": "5d15938aa1344"
},
{
"subject_id": "5da9ff659fb7c",
"subject_name": "Biology",
"image": "upload/subject/03_logo-1164x484.png",
"active": "1",
"standard_id": "5d1594e283e1a",
"medium_id": "5d15938aa1344"
},
{
"subject_id": "5da9ff990b1c6",
"subject_name": "Chemisty",
"image": "upload/subject/02_logo-1168x490.png",
"active": "1",
"standard_id": "5d1594e283e1a",
"medium_id": "5d15938aa1344"
},
{
"subject_id": "5de76afbd064e",
"subject_name": "Computer",
"image": "upload/subject/07_logo-1169x486.png",
"active": "1",
"standard_id": "5d1594e283e1a",
"medium_id": "5d15938aa1344"
},
{
"subject_id": "5d788906c431b",
"subject_name": "Devsatya Paperset March 2020",
"image": "upload/subject/04_logo-1174x491.png",
"active": "1",
"standard_id": "5d1594e283e1a",
"medium_id": "5d15938aa1344"
}
]
}
]
as above response i create a model class as below
// To parse this JSON data, do
//
// final subjectByUser = subjectByUserFromJson(jsonString);
import 'dart:convert';
List<SubjectByUser> subjectByUserFromJson(String str) =>
List<SubjectByUser>.from(
json.decode(str).map((x) => SubjectByUser.fromJson(x)));
String subjectByUserToJson(List<SubjectByUser> data) =>
json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
class SubjectByUser {
SubjectByUser({
required this.success,
required this.subject,
});
int success;
List<Subject> subject;
factory SubjectByUser.fromJson(Map<String, dynamic> json) => SubjectByUser(
success: json["success"],
subject:
List<Subject>.from(json["subject"].map((x) => Subject.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"success": success,
"subject": List<dynamic>.from(subject.map((x) => x.toJson())),
};
}
class Subject {
Subject({
required this.subjectId,
required this.subjectName,
required this.image,
required this.active,
required this.standardId,
required this.mediumId,
});
String subjectId;
String subjectName;
String image;
String active;
String standardId;
String mediumId;
factory Subject.fromJson(Map<String, dynamic> json) => Subject(
subjectId: json["subject_id"],
subjectName: json["subject_name"],
image: json["image"],
active: json["active"],
standardId: json["standard_id"],
mediumId: json["medium_id"],
);
Map<String, dynamic> toJson() => {
"subject_id": subjectId,
"subject_name": subjectName,
"image": image,
"active": active,
"standard_id": standardId,
"medium_id": mediumId,
};
}
I write below code, now how can i display subjects data like subjectName, image, etc in list view?
in print i can get the subject name on index 3.
Future getUserSubject(List subject) async {
final subjectUrl =
"$baseUrl/subject/get_by_user_plan?user_id=609cab2cd5b6c&order_id=1620889722609cd07a601af469889697609cab2cd5b6c&standard_id=5d1594e283e1a&medium_id=5d15938aa1344";
final response = await http.get(Uri.parse(subjectUrl));
final subjects = response.body;
final decodedData = jsonDecode(subjects);
SubjectByUserModel subjectByUserModel =
SubjectByUserModel.fromJson(decodedData);
print(subjectByUserModel.subject?[2].subjectName);
}
I put all codes in separate file also view

Answer 1

You can use ListView.builder
ListView.builder(
itemCount: subjectByUserModel.subject ?? 0,
itemBuilder: (BuildContext context, int index) {
print(subjectByUserModel.subject?[index].subjectName);
print(subjectByUserModel.subject?[index].standardId); // so on
// Now you can build any widget for per subject.
// like card, listTile or simple text.
return Text('');
});