We are excited to announce that the ASP.NET Forums are moving to the new Microsoft Q&A experience. Learn more >
Pass array from Jquery to API
6 replies
Last post Jun 20, 2020 08:53 PM by bruce (sqlwork.com)
Last post Jun 20, 2020 08:53 PM by bruce (sqlwork.com)
Member
35 Points
156 Posts
Pass array from Jquery to API
Jun 18, 2020 09:13 AM|binustrat|LINK
I am trying to pass array data to my api . But i am getting status 400.Below i am giving my code
Model
=======
public class OrderItems
{
public int ItemId { get; set; }
public int ItemQty { get; set; }
}
public class Orders
{
public int UserId { get; set; }
public List<OrderItems> OrderItems { get; set; }
}
API Method
==============
[Route("AddOrder")]
[HttpPost]
public HttpResponseMessage AddOrder(Orders OrderItem)
{
try
{
OrderBl ordrBl = new OrderBl();
int OrderStaus = 0;
// int OrderStaus= ordrBl.AddOrder(OrderItem);
if (OrderStaus == 1)
{
return new Response<string>("New Order Added Successfully", "", HttpStatusCode.Created);
}
else if (OrderStaus == 3)
{
return new Response<string>("Order Updated Successfully", "", HttpStatusCode.Created);
}
else
{
return new Response<string>("Failed", "", HttpStatusCode.NotImplemented);
}
}
catch (Exception ex)
{
return new Response<string>("Something went wrong", "", HttpStatusCode.ServiceUnavailable);
}
}
Jquery code
==========
var CartArray = n[];
var OrderData = [];
var Data = {};
$.each(CartArray, function (key, value) {
Data.ItemId = value.Id
Data.itemQty = value.Qty
OrderData.push(Data);
});
var OrderItem = {}
OrderItem.OrderItem = { "UserId": 1, OrderItems: OrderData };
$.ajax({
type: 'POST',
dataType: 'json',
cache: false,
url: "https://localhost:44360/api/Order/AddOrder",
data: JSON.stringify(OrderItem),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
success: function (data, textStatus, jqXHR) {
},
error: function (jqXHR, textStatus, errorThrown) {
//Do Stuff or Nothing
}
});
Please let me know where i am doing wrong
All-Star
58444 Points
15777 Posts
Re: Pass array from Jquery to API
Jun 18, 2020 04:10 PM|bruce (sqlwork.com)|LINK
if you used the debugger, you would see that the OrderData array, all the rows have the same data, because you keep updating and adding the same object.
Member
35 Points
156 Posts
Re: Pass array from Jquery to API
Jun 19, 2020 01:41 AM|binustrat|LINK
Hi Bruce,
You are right. in OrderData array same data only (last row in loop). How we can avoid that?
Even if it is, same data it should go to API. right? why its not going to API?
Participant
1253 Points
943 Posts
Re: Pass array from Jquery to API
Jun 19, 2020 03:43 AM|yogyogi|LINK
There are many ways to do it. I recommend you to use [FromBody] and [FromForm] ways to pass values to API with jQuery. Refer - How to Consume ASP.NET Core API in jQuery
Http Error 400 which you get is due to you are not sending correctly the parameters (i.e. array value) to the API. You should debug and check what JSON you are building. You can place this code to print it on console. Put this code just before you make the AJAX call:
Most probable the JSON formed is wrong based on what the API is requiring.
♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠
Member
35 Points
156 Posts
Re: Pass array from Jquery to API
Jun 19, 2020 04:03 AM|binustrat|LINK
Hi YogYogi,
Yes, I know Http Error 400 is because of formatting parameters. Still i am not able to identify where is the format issue. That's the reason i provided my question my api model, api method, jquery code which i formatting parameters etc.
Participant
1253 Points
943 Posts
Re: Pass array from Jquery to API
Jun 19, 2020 01:52 PM|yogyogi|LINK
Like I said in my post do console.log(JSON.stringify(OrderItem)); and provide the JSON in your question for us to check the format problem.
♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠
All-Star
58444 Points
15777 Posts
Re: Pass array from Jquery to API
Jun 20, 2020 08:53 PM|bruce (sqlwork.com)|LINK
because your post json does not match the format of the parameter.
the parameter is expecting json (Order class):
{ "UserId": 100, "OrderItems": [ {"ItemId": 12, "ItemQty": 100 }, {"ItemId": 1, "ItemQty": 10 }, } }but you are sending json:
{ "OrderItem": { "UserId": 100, "OrderItems": [ {"ItemId": 1, "ItemQty": 10 }, {"ItemId": 1, "ItemQty": 10 }, } } }if you would learn to use the browsers debugger, these error would be simple to fix.