Angular Post array results in all NULL in database

Question

I am trying to post data to my table (T-SQL/Azure) but all it writes is NULL and just one line, not even the complete array. I have tried numerous variations of the $param, serialize, $httpParamSerializer etc. none of them write the contents inside the table. Even tho the console.log tells me all is ok.

var data = $scope.test;
console.log(data);
var jsonData = angular.toJson(data);
console.log(jsonData)
var objectToSerialize = { 'object': jsonData };
console.log(objectToSerialize);

$http({
     url: 'http://url/api/UserOrderProductList',
     method: "POST",
     data: $.param(objectToSerialize),
     //data: $.param(data),
     //data: $.param(jsonData),
     //data: $httpParamSerializerJQLike(objectToSerialize),

     headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
     //headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }

      }).success(function (data) {
            alert("done");
      });

this is what i am writing:

    var data = {
        "quantity": 0,
        "title": "string",
        "imageFront": "string"
        }

with the same matching table.

in the debugger is get the 201 created and the form-data of the complete array

Form Data from Headers:

object:[{"count":1,"title":"Lara croft",imageFront":"20170807234015"},
{"count":1,"title":"Dragon Age","imageFront":"20170807231312"},
{"count":2,"title":"Madden","imageFront":"20170807235148"}]

This is what is says in the Preview/Response:

{"id":16,"count":null,"imageFront":null,"title":null}

This is the backend section, how the request is recieved:

  // POST: api/UserOrders
  [ResponseType(typeof(UserOrderProductList))]
  public async Task<IHttpActionResult> PostUserOrderProductList(UserOrderProductList UserOrderProductList)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        db.UserOrderProductLists.Add(UserOrderProductList);
        await db.SaveChangesAsync();

        return CreatedAtRoute("DefaultApi", new { id = UserOrderProductList.id }, UserOrderProductList);
    }

what is going on and why does it all write NULL? When i am writing with swagger is all turns out fine.

How does your backend receive the request data? Can you please edit your question to include that code? — Aaron Chen
– Aaron Chen, Commented Dec 6, 2017 at 9:02

Aaron Chen · Accepted Answer · 2017-12-06 10:58:43Z

1

Try setting Content-Type to application/json and passing JSON data to your Web API:

var data = $scope.test;
var jsonData = angular.toJson(data);

$http({
    url: 'http://url/api/UserOrderProductList',
    method: "POST",
    data: jsonData,
    headers: { 'Content-Type': 'application/json' }

}).success(function (data) {
    alert("done");
});

And the parameter of the Web API should be a List rather than an Object:

// POST: api/UserOrders
[ResponseType(typeof(UserOrderProductList))]
public async Task<IHttpActionResult> PostUserOrderProductList(List<UserOrderProductList> userOrderProductLists)
{
    //...
}

A similar question is answered here: Web Api 2 receive json array.

edited Dec 6, 2017 at 10:58

answered Dec 6, 2017 at 10:19

Aaron Chen

9,9701 gold badge20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ewald Bos Over a year ago

same result unfortunatly

Aaron Chen Over a year ago

The parameter of the Web API should be a List rather than an Object.

Ewald Bos · Accepted Answer · 2017-12-06 12:06:41Z

To post the contents of an Angular Ng-Repeat into a database table with an WEB API 2 backend, thanks to Arron Chen.

var data = $scope.test; // CONTENTS OF THE NG-REPEAT
var jsonData = angular.toJson(data);

$http({
    url: 'http://url/api/UserOrderProductList',
    method: "POST",
    data: jsonData,
    headers: { 'Content-Type': 'application/json' }

}).success(function (data) {
   alert("done");
});

With the matching backend:

// POST: api/UserOrders
[Route("api/UserOrderProductList/AddOrderList")]
public HttpResponseMessage PostUserOrderProductList(List<UserOrderProductList> UserOrderProductList)
{

   db.UserOrderProductLists.AddRange(UserOrderProductList);
   db.SaveChangesAsync();

   return new HttpResponseMessage { StatusCode = HttpStatusCode.OK };
}

Collectives™ on Stack Overflow

Angular Post array results in all NULL in database

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related