I have recently started my journey in Flutter(Dart). I am trying to build an application which fetches some JSON information using an API call.
I have successfully written a code for the following JSON file
[
{
"on_api": "1",
"tl_api": "10",
"pl1_api": "Smoor Chocolates Lounge",
"pl2_api": "Vasant Nagar",
"dl1_api": "MySoftwareCompany Software Pvt. Ltd.",
"dl2_api": "Cunningham Road, Bengaluru - 560052",
"fn_api": "Snehanshu",
"ln_api": "Bhattacharya",
"cn_api": "0123456789",
"eid_api": "[email protected]"
},
{
"on_api": "1",
"tl_api": "10",
"pl1_api": "Smoor Chocolates Lounge",
"pl2_api": "Vasant Nagar",
"dl1_api": "MySoftwareCompany Software Pvt. Ltd.",
"dl2_api": "Cunningham Road, Bengaluru - 560052",
"fn_api": "Snehanshu",
"ln_api": "Bhattacharya",
"cn_api": "0123456789",
"eid_api": "[email protected]"
},
{
"on_api": "1",
"tl_api": "10",
"pl1_api": "Smoor Chocolates Lounge",
"pl2_api": "Vasant Nagar",
"dl1_api": "MySoftwareCompany Software Pvt. Ltd.",
"dl2_api": "Cunningham Road, Bengaluru - 560052",
"fn_api": "Snehanshu",
"ln_api": "Bhattacharya",
"cn_api": "0123456789",
"eid_api": "[email protected]"
},
{
"on_api": "1",
"tl_api": "10",
"pl1_api": "Smoor Chocolates Lounge",
"pl2_api": "Vasant Nagar",
"dl1_api": "MySoftwareCompany Software Pvt. Ltd.",
"dl2_api": "Cunningham Road, Bengaluru - 560052",
"fn_api": "Snehanshu",
"ln_api": "Bhattacharya",
"cn_api": "0123456789",
"eid_api": "[email protected]"
},
{
"on_api": "1",
"tl_api": "10",
"pl1_api": "Smoor Chocolates Lounge",
"pl2_api": "Vasant Nagar",
"dl1_api": "MySoftwareCompany Software Pvt. Ltd.",
"dl2_api": "Cunningham Road, Bengaluru - 560052",
"fn_api": "Snehanshu",
"ln_api": "Bhattacharya",
"cn_api": "0123456789",
"eid_api": "[email protected]"
}
]
Here is its element class
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["order_number"],
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"],
);
}
Here is its api calling code
import 'dart:convert';
import 'package:http/http.dart';
import 'package:smoorapplication/src/constants/constants.dart';
import 'package:smoorapplication/src/model/elements.dart';
Future<List<Element>> apiGetOrder() async{
var response = await get(Uri.parse(MOCK_API_SMOOR_1));
var jsonData = jsonDecode(response.body);
List<Element> elements = <Element>[];
for(var i in jsonData){
Element element = Element.fromJson(i);
elements.add(element);
}
print(elements.length);
}
I want the api call code and element class code for this kind of messy JSON file
{
"orders": [
{
"id": 3927180738697,
"admin_graphql_api_id": "gid://shopify/Order/00000",
"app_id": 580111,
"browser_ip": "122.172.179.207",
"buyer_accepts_marketing": false,
"cancel_reason": null,
"cancelled_at": null,
"cart_token": null,
"checkout_id": 20726986440841,
"checkout_token": "65651fdv561165",
"client_details": {
"accept_language": "en-US,en;q=0.9",
"browser_height": 860,
"browser_ip": "122.172.179.207",
"browser_width": 1487,
"session_hash": null,
},
"closed_at": null,
"confirmed": true,
"contact_email": null,
"created_at": "2021-12-16T11:03:59+05:30",
"currency": "INR",
"current_subtotal_price": "500.00",
"current_subtotal_price_set": {
"shop_money": {
"amount": "500.00",
"currency_code": "INR"
},
"presentment_money": {
"amount": "500.00",
"currency_code": "INR"
}
},
"current_total_discounts": "0.00",
"current_total_discounts_set": {
"shop_money": {
"amount": "0.00",
"currency_code": "INR"
},
"presentment_money": {
"amount": "0.00",
"currency_code": "INR"
}
},
"current_total_duties_set": null,
"current_total_price": "600.00",
"current_total_price_set": {
"shop_money": {
"amount": "600.00",
"currency_code": "INR"
},
"presentment_money": {
"amount": "600.00",
"currency_code": "INR"
}
},
"current_total_tax": "91.52",
"current_total_tax_set": {
"shop_money": {
"amount": "91.52",
"currency_code": "INR"
},
"presentment_money": {
"amount": "91.52",
"currency_code": "INR"
}
}
}
]
}
2
Answers
I guess you can come up with an API call method (similar to which you already have done). The JSON which you are providing has different sub levels. So, you could use different classes for it. For simplification there are tools out there which converts JSON to Dart. You could look for them. Once such tool is this.
API calling would most probably be just adding it in a root element. I guess it should take care of the rest. (because the inter dependency classes are also included when converting JSON to dart)
I tried to convert your JSON (which had an extra comma in line:19) and below is the result I got.
To call
API
your method is sufficient you just need toreturn
value from your function according to the return type of your function. In your function you have areturn
type ofList<Element>
so you need to perform some changes in your codeand for creating a
class
according to theresponse
you can use a handy tool which Quicktype I’m also sharing link for the samehttps://app.quicktype.io/