Post List of Data to API in flutter - flutter

Question

I am currently working on an API and I want to post a list of data to the API.
this is an e-commerce example, so I would need to pass the multiple items in the cart as per the line no, line no will auto-increment. and order should be posted with the same order ID but with a different order number.
This is what the Json looks like -
{
"VarFID": 1,
"VarCID": 1,
"VarAreaCode": 1,
"VarAge": 250,
"VarB": 20,
"VarF": 1,
"VarC": 256,
"VarF": 1,
"OrderLines": [
{
"OrderID": "SQ/19/10",
"Line No_": 1,
"Date": "2019-04-02 00:00:00",
"Time": "2019-04-02 11:38:48",
"No_": "FAG-033",
"Name": "LC GOLD",
"Quantity":000,
"Unit Price": 10000,
"Amount": 10000,
"Status": "Under Processing",
"Remarks": "VIKRAM",
"VariantCode":3
},
{
"OrderID": "SQ/19/10",
"Line No_": 2,
"Date": "2019-04-02 00:00:00",
"Time": "2019-04-02 11:38:48",
"No_": "F061",
"Name": "LC S - I",
"Quantity": 00,
"Unit Price": 100,
"Amount": 300,
"Status": "Under Processing",
"Remarks": "VIKRAM ",
"VariantCode":2
}
]
}
This is the code I am using to generate the array, the data is going through, but it is only posting one item/line and not both of them.
void sendData2() async {
mainModel = MainModel(
VarFID: "1",
VarCID: "1",
VarAreaCode: "1",
VarAge: "1",
VarB: "1",
VarF: "1",
VarC: "1",
VarF: "1",
OrderLines: listOrderLines.OrderLines);
var response = await http.post(
Uri.https('softwareonus.com:8082', '/admindealerlist/'),
headers: {"Content-Type": "application/json"},
body: json.encode(mainModel.toJson()),
);
print(" Send Data 2 Response : ${response.body}");
print(" Send Data 2 Response : ${response.statusCode}");
}
I have created model classes using JsonSerialazble

Answer 1

You are doing body: json.encode(mainModel.toJson()), which is pointless since your function .toJson() in your model already does the json.encode(..) for you. You should just .post your mainModel.toJson() to your API.

Answer 2

Based on the data, you have shared. Create 2 Model Classes-
Object Model Class of each object you have
Super Model class (use Object Model Class here like the code)
code Snippet:
ObjectModel-:
import 'package:json_annotation/json_annotation.dart';
part 'ObjectModel.g.dart'; // you have to use naming convention of like this (yourfilename.g.dart)
#JsonSerializable()
class ObjectModel
{
String orderId;
String lineNo;
//All other variable define here
// Initilize all in the constructor
ObjectModel({this.orderId,this.lineNo,[.... your othersVariable...]});
#override
factory ObjectModel.fromJson(Map<String, dynamic> json) =>
_$ObjectModelFromJson(json);
Map<String, dynamic> toJson() => _$ObjectModelToJson(this);
}
SuperModel:
import 'package:json_annotation/json_annotation.dart';
part 'SuperModel.g.dart'; ///you have to use naming convention of like this (yourfilename.g.dart)
#JsonSerializable()
class SuperModel {
String varFid;
String varCID;
// alll othervarialble...
List<ObjectModel> orderLines;
//initilize all in constructor
SuperModel({ this.varFid,this.varCID ,[.....otherVariable],this.orderLines });
factory SuperModel.fromJson(Map<String, dynamic> json) =>
_$SuperModelFromJson(json);
Map<String, dynamic> toJson() => _$SuperModelToJson(this);
}
Note: To create Model Classes I am using this two packages and I have put that in dev_dependency:
dev_dependencies:
flutter_test:
sdk: flutter
build_runner:
json_serializable: ^3.3.0
Now you have to run the below command to generate the g.dart file
flutter pub run build_runner build
Now finally you can do HTTP Post request and model class like this-
void send() async {
\\SuperModel supermodel = SuperModel ([initialize data to this model class])
var response = await http.post(
Uri.https('softwareonus.com:8082', '/admindealerlist/'),
headers: {"Content-type": "application/json"},
body: json.encode(supermodel .toJson()));
print(response.body);
}
}
Alternatively you can watch my Model Class series on Youtube Here is the link: https://youtube.com/playlist?list=PLtIU0BH0pkKpXE-1vC7NswofFPby1OYh-
Thanks :)
Update:
Suppose there is a button in your app, when you click on the button then you add the data on the list
class _ListDataState extends State<ListData> {
SuperModel superModel = SuperModel ();
#override
Widget build(BuildContext context) {
// your UI code
}
void add() {
setState(() {
superModel.orderLines.add(ObjectModel(Your all variable initialize here);
});
}
Call this add method whenever you wanted to add new order in your list. After adding all data send it using send method
void send() async {
var response = await http.post(
Uri.https('softwareonus.com:8082', '/admindealerlist/'),
headers: {"Content-type": "application/json"},
body: json.encode(supermodel .toJson()));
print(response.body);
}

Answer 3

Replace with your object class, which must have the toJson() method that returns the Map.
import 'dart:convert' on to your API function class
And don't forget to add,
headers: {'Content-type': 'application/json','Accept': application/json'},
Future<bool> addToSaleDetail(List<YourCustomObject> _listOfObject) async {
String unparsedUrl = "$baseUrl/AddMobileListSaleBrief";
var url = Uri.parse(unparsedUrl);
List jsonList = [];
_listOfObject.map((item) => jsonList.add(item.toJson())).toList();
final response = await http.post(
url,
body: json.encode({"finalResponse": jsonList}["finalResponse"]),
headers: {
'Content-type': 'application/json',
'Accept': 'application/json'
},
);
if (response.statusCode == 200) {
return true;
} else {
return false;
}
}

Answer 4

Try to change your mainModel to Map<String, dynamic> then encode your Map<String, dynamic> to json and send it to body. Add this 'Content-type': 'application/json' to your headers to make your request sent as json. For Example :
List<Map<String, String>> listItem = <Map<String, String>>[];
for (var element in myList) {
Map<String, String> val = {
'product': element.product.id_product.toString(),
'quantity': element.quantity.toString(),
'total': element.total.toString(),
};
listItem.add(val);
}
Map data = {
'pay': pay,
'customer': id_customer.toString(),
'items': listItem, // this is a List
};
final http.Response response = await client.post(
Uri.parse(...), // your url
headers: {
'content-type': 'application/json' // don't forget this one
},
body: jsonEncode(data), // encode my Map to json
);
That's it! (by the way this is example of my code)