Mapping response.body to model class - json

Question

I'm trying to map response to model class and then show all elements one by one, so that user can scroll down. Response goes like that:
{"items":[{"id":"bd9acd37-5c91-47cb-a71e-0e43fb2f7882","imageUrl":"","title":"fak hez as","city":"Gdansk"},{"id":"210ad8c8-d279-4c38-845c-34c772cfec21","imageUrl":"","title":"Some random title :)","city":"Warsaw"}],"total":2,"pageNumber":1}
And my model which I have generated with https://plugins.jetbrains.com/plugin/12562-jsontodart-json-to-dart-
class Advertisement {
List<Items>? _items;
int? _total;
int? _pageNumber;
List<Items>? get items => _items;
int? get total => _total;
int? get pageNumber => _pageNumber;
Advertisement({List<Items>? items, int? total, int? pageNumber}) {
_items = items;
_total = total;
_pageNumber = pageNumber;
}
Advertisement.fromJson(dynamic json) {
if (json["items"] != null) {
_items = [];
json["items"].forEach((v) {
_items?.add(Items.fromJson(v));
});
}
_total = json["total"];
_pageNumber = json["pageNumber"];
}
Map<String, dynamic> toJson() {
var map = <String, dynamic>{};
if (_items != null) {
map["items"] = _items?.map((v) => v.toJson()).toList();
}
map["total"] = _total;
map["pageNumber"] = _pageNumber;
return map;
}
}
/// id : "bd9acd37-5c91-47cb-a71e-0e43fb2f7882"
/// imageUrl : ""
/// title : "fak hez as"
/// city : "Gdansk"
class Items {
String? _id;
String? _imageUrl;
String? _title;
String? _city;
String? get id => _id;
String? get imageUrl => _imageUrl;
String? get title => _title;
String? get city => _city;
Items({String? id, String? imageUrl, String? title, String? city}) {
_id = id;
_imageUrl = imageUrl;
_title = title;
_city = city;
}
Items.fromJson(dynamic json) {
_id = json["id"];
_imageUrl = json["imageUrl"];
_title = json["title"];
_city = json["city"];
}
Map<String, dynamic> toJson() {
var map = <String, dynamic>{};
map["id"] = _id;
map["imageUrl"] = _imageUrl;
map["title"] = _title;
map["city"] = _city;
return map;
}
}
My screen:
import 'dart:convert';
import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:.../constants/AppConstants.dart';
import 'package:.../ui/pages/home/page/Advertisement.dart';
import 'package:.../util/HttpActions.dart';
import 'BottomAppBar.dart';
import 'FAB.dart';
import 'Advertisement.dart';
class HomePage extends StatefulWidget {
final String jwt;
const HomePage(this.jwt);
#override
_HomePage createState() => _HomePage();
factory HomePage.fromBase64(String jwt) => HomePage(jwt);
}
class _HomePage extends State<HomePage> {
late final String jwt;
#override
void initState() {
super.initState();
jwt = widget.jwt;
}
#override
Widget build(BuildContext context) => Scaffold(
body: Scaffold(
backgroundColor: const Color(0xFEF9F9FC),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
floatingActionButton: buildFAB(),
bottomNavigationBar: BuildBottomAppBar(),
body: Container(
padding: EdgeInsets.all(35.0),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
children: [
FutureBuilder(
future: fetchAdvertisements(),
builder: (context, snapshot) => snapshot.hasData
? Text("")
: snapshot.hasError
? Text("An error occurred")
: CircularProgressIndicator(),
),
],
),
),
),
);
Future<List<Advertisement>?> fetchAdvertisements() async {
var response = await HttpActions.makeHttpGet(
{},
AppConstants.ADVERTISEMENTS_ENDPOINT,
{HttpHeaders.contentTypeHeader: HttpActions.APPLICATION_JSON_HEADER});
print(response.statusCode);
if (response.statusCode == 200) {
print(response.body);
final responseList = json.decode(response.body);
print(responseList);
List<Advertisement> z = (json.decode(response.body) as List)
.map((i) => Advertisement.fromJson(i))
.toList();
print(z);
return null;
} else {
throw Exception('Failed to load post');
}
}
}
Error occurs while executing this line:
List<Advertisement> z = (json.decode(response.body) as List)
.map((i) => Advertisement.fromJson(i))
.toList();
it does not map to this List
While debugging I get:
What I'm making wrong? Is there something wrong with model class?

Answer 1

One more mistake that you are making with your code, You are calling fetchAdvertisement() method inside a build(BuildContext context). This means everytime build() method gets called. It will call fetchAdvertisement() this as well.
Column(
children: [
FutureBuilder(
future: fetchAdvertisements(),
builder: (context, snapshot) => snapshot.hasData
? Text("")
: snapshot.hasError
? Text("An error occurred")
: CircularProgressIndicator(),
),
],
),
To avoid such an issue.
late Function _fetchAdvertisements;
void initState() {
super.initState();
_fetchAdvertisements = fetchAdvertisements(); }
Column(
children: [
FutureBuilder(
future: _fetchAdvertisements,
builder: (context, snapshot) => snapshot.hasData
? Text("")
: snapshot.hasError
? Text("An error occurred")
: CircularProgressIndicator(),
),
],
),

Answer 2

You cannot simply parse this with cast as List. Because your response isn't even a List.
{
"items": [
{
"id": "bd9acd37-5c91-47cb-a71e-0e43fb2f7882",
"imageUrl": "",
"title": "fak hez as",
"city": "Gdansk"
},
{
"id": "210ad8c8-d279-4c38-845c-34c772cfec21",
"imageUrl": "",
"title": "Pozdrawiam z Łodzi :)",
"city": "Warsaw"
}
],
"total": 2,
"pageNumber": 1
}
For this response, you can parse this like this:
Advertisement.fromJson(json.decode(response.body))
But now you have only one item of Advertisement.
If your response were like this, with multiple advertisements:
{
"advertisements": [
{
"items": [
{
"id": "bd9acd37-5c91-47cb-a71e-0e43fb2f7882",
"imageUrl": "",
"title": "fak hez as",
"city": "Gdansk"
},
{
"id": "212ad8c8-d279-4c38-845c-34c772cfec21",
"imageUrl": "",
"title": "Great city!",
"city": "Łódź"
}
],
"total": 2,
"pageNumber": 1
},
{
"items": [
{
"id": "bd9acd37-5c91-47cb-a71e-0e43fb2f7882",
"imageUrl": "",
"title": "fak hez as",
"city": "Gdansk"
},
{
"id": "210ad8c8-d279-4c38-845c-34c772cfec21",
"imageUrl": "",
"title": "Some random title :)",
"city": "Warsaw"
}
],
"total": 2,
"pageNumber": 1
}
]
}
You can parse this simply with this code:
List<Advertisement> advertisements = [
for (final advertisement in json.decode(response2)['advertisements'])
Advertisement.fromJson(advertisement)
];
You can learn how to do JSON serialization properly with JsonSerializable I recommend you to read this here.

Answer 3

I just copied you responded.body text and showed you a dummy example. Everything will be done in the same way, weather you use an HTTP calls. Always make sure that you know what response is coming.
class __AppState extends State<_App> {
#override
void initState() {
// TODO: implement initState
super.initState();
convertApiResponse();
}
Future<String> getApiJson() async {
return '{"items":[{"id":"bd9acd37-5c91-47cb-a71e-0e43fb2f7882","imageUrl":"","title":"fak hez as","city":"Gdansk"},{"id":"210ad8c8-d279-4c38-845c-34c772cfec21","imageUrl":"","title":"Some random title :)","city":"Warsaw"}],"total":2,"pageNumber":1} ';
}
Future<void> convertApiResponse() async {
final data = await getApiJson();
final decodedData = json.decode(data) as Map;
Advertisement x = Advertisement.fromJson(decodedData);
x._items!.forEach((element) {
log("Item-> City: ${element.city}");
log("Item->ID: ${element.id}");
log("Item->ImageURL: ${element.imageUrl}");
log("Item->Title: ${element.title}");
});
log("Page Number: ${x.pageNumber}");
log("Total: ${x.total}");
}
#override
Widget build(BuildContext context) {
return MaterialApp(home: Scaffold());
}
}
Untouched Items.dart
class Items {
String? _id;
String? _imageUrl;
String? _title;
String? _city;
String? get id => _id;
String? get imageUrl => _imageUrl;
String? get title => _title;
String? get city => _city;
Items({String? id, String? imageUrl, String? title, String? city}) {
_id = id;
_imageUrl = imageUrl;
_title = title;
_city = city;
}
Items.fromJson(dynamic json) {
_id = json["id"];
_imageUrl = json["imageUrl"];
_title = json["title"];
_city = json["city"];
}
Map<String, dynamic> toJson() {
var map = <String, dynamic>{};
map["id"] = _id;
map["imageUrl"] = _imageUrl;
map["title"] = _title;
map["city"] = _city;
return map;
}
}
Untouched Advertisement.dart
class Advertisement {
List<Items>? _items;
int? _total;
int? _pageNumber;
List<Items>? get items => _items;
int? get total => _total;
int? get pageNumber => _pageNumber;
Advertisement({List<Items>? items, int? total, int? pageNumber}) {
_items = items;
_total = total;
_pageNumber = pageNumber;
}
Advertisement.fromJson(dynamic json) {
if (json["items"] != null) {
_items = [];
json["items"].forEach((v) {
_items?.add(Items.fromJson(v));
});
}
_total = json["total"];
_pageNumber = json["pageNumber"];
}
Map<String, dynamic> toJson() {
var map = <String, dynamic>{};
if (_items != null) {
map["items"] = _items?.map((v) => v.toJson()).toList();
}
map["total"] = _total;
map["pageNumber"] = _pageNumber;
return map;
}
}

Answer 4

Here is a picture that resolves your fetchAdvertisements() call on every build