Map API data into a Dart class - json

Question

I have a kind of POJO class in Dart and I want to map the variables using an API call.
Here is my POJO class in Code.1,
class Elements {
String onApi;
String tlApi;
String pl1Api;
String pl2Api;
String dl1Api;
String dl2Api;
String fnApi;
String lnApi;
String cnApi;
String eidApi;
Elements(
{this.onApi,
this.tlApi,
this.pl1Api,
this.pl2Api,
this.dl1Api,
this.dl2Api,
this.fnApi,
this.lnApi,
this.cnApi,
this.eidApi});
Elements.fromJson(Map<String, dynamic> json) {
onApi = json['on_api'];
tlApi = json['tl_api'];
pl1Api = json['pl1_api'];
pl2Api = json['pl2_api'];
dl1Api = json['dl1_api'];
dl2Api = json['dl2_api'];
fnApi = json['fn_api'];
lnApi = json['ln_api'];
cnApi = json['cn_api'];
eidApi = json['eid_api'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['on_api'] = this.onApi;
data['tl_api'] = this.tlApi;
data['pl1_api'] = this.pl1Api;
data['pl2_api'] = this.pl2Api;
data['dl1_api'] = this.dl1Api;
data['dl2_api'] = this.dl2Api;
data['fn_api'] = this.fnApi;
data['ln_api'] = this.lnApi;
data['cn_api'] = this.cnApi;
data['eid_api'] = this.eidApi;
return data;
}
}
Code.1
Here is the JSON code which I want to map via an API call in Code.2,
{
"on_api": "1",
"tl_api": "10",
"pl1_api": "XYZ Chocolates Lounge",
"pl2_api": "ABC Nagar",
"dl1_api": "EFGH Software Pvt. Ltd.",
"dl2_api": "Random Road, Bengaluru - 5600XX",
"fn_api": "Snehanshu",
"ln_api": "Bhattacharya",
"cn_api": "01234",
"eid_api": "snehanshu#abc.com"
}
Code.2
Here is my API calling class Code.3,
import 'dart:convert';
import 'package:http/http.dart';
import 'package:smoorapplication/src/constants/constants.dart';
import 'package:smoorapplication/src/model/elements.dart';
Future<dynamic> apiGetOrder() async{
var response = await get(Uri.parse(API_LINK));
var jsonData = jsonDecode(response.body);
List<Elements> elements = [];
for(var u in jsonData){
Elements element =
Elements.fromJson(u);
elements.add(element);
}
print(elements.length);
return elements;
}
Code.3
So, I need some help in writing the code for the API call, so that it can map the data successfully.
Thank you

Answer 1

your model class
import 'dart:convert';
Element elementFromJson(String str) => Element.fromJson(json.decode(str));
String elementToJson(Element data) => json.encode(data.toJson());
class Element {
Element({
this.onApi,
this.tlApi,
this.pl1Api,
this.pl2Api,
this.dl1Api,
this.dl2Api,
this.fnApi,
this.lnApi,
this.cnApi,
this.eidApi,
});
String onApi;
String tlApi;
String pl1Api;
String pl2Api;
String dl1Api;
String dl2Api;
String fnApi;
String lnApi;
String cnApi;
String eidApi;
factory Element.fromJson(Map<String, dynamic> json) => Element(
onApi: json["on_api"],
tlApi: json["tl_api"],
pl1Api: json["pl1_api"],
pl2Api: json["pl2_api"],
dl1Api: json["dl1_api"],
dl2Api: json["dl2_api"],
fnApi: json["fn_api"],
lnApi: json["ln_api"],
cnApi: json["cn_api"],
eidApi: json["eid_api"],
);
Map<String, dynamic> toJson() => {
"on_api": onApi,
"tl_api": tlApi,
"pl1_api": pl1Api,
"pl2_api": pl2Api,
"dl1_api": dl1Api,
"dl2_api": dl2Api,
"fn_api": fnApi,
"ln_api": lnApi,
"cn_api": cnApi,
"eid_api": eidApi,
};
}
and here's your getAPiOrder method
Future<dynamic> apiGetOrder() async{
var response = await get(Uri.parse(API_LINK));
///if this line doesn't work
Element element = Element.fromJson(respnse.body);
///try this line
Element element = Element.fromJson(Map.from(respnse.body));
return elements;
}