Pass array of data from Angular $http POST

Question

I need to pass an array of object from my Angular application to a .Net web service with Nancy framework.

I tried this :

function TestCtrl($scope, $http){
    $scope.postTest = function(){

        var data = [obj1, obj2, obj3];

        $http({
            url: 'myURL',
            method: "POST",
            data: data,
            headers: {
                     'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
        }).success(function(data){
            alert("done");
        });
    }
}

But server send 500 Internal server error.
I don't know why it doesn't work. I'm not an expert web service expert but I think it's a serialization problem.

Can someone help me?

If you are facing AngularJS specific serialization problem, then httpParamSerializerJQLike is what you need. Take a look at stackoverflow.com/questions/33852190/… — VivekDev
– VivekDev, Commented Nov 24, 2015 at 4:50

Community · Accepted Answer · 2017-05-23 11:54:09Z

34

According to this post, you're right, this is about serialization. Angular doesn't automatic serialize the data for you, you need to parse the data before sending it:

...

$http({
  url: 'myURL',
  method: "POST",
  data: $.param(data),
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
  }
})...

If you don't use jQuery, you'll need to roll your own $.parse. There is a snippet here or you could adapt jQuery implementation.

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Apr 29, 2013 at 10:28

Caio Cunha

23.4k6 gold badges81 silver badges74 bronze badges

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

3 Comments

axvo Over a year ago

Thank for your answer, but $.param doesn't work, an error says it's not defined

Caio Cunha Over a year ago

This is a jQuery call. AngularJs doesn't provide a solution out of the box :(. Here is something about it. If you don't use jQuery, here is a snippet to achieve the encoding. I'll update the answer.

axvo Over a year ago

it works fine for a simple object, but with an array of objects, it doesn't work. However, I think now it's a server-side problem...

fauverism · Accepted Answer · 2014-12-01 21:57:47Z

21

angular.toJson(data)

should work in place of

$.param(data)

answered Dec 1, 2014 at 21:57

fauverism

1,9924 gold badges36 silver badges62 bronze badges

1 Comment

Rimian Over a year ago

This should be a comment?

Community · Accepted Answer · 2017-05-23 12:32:26Z

fauverism is right, you can use angular.toJson(data). Not instead, but before $.param though.

function TestCtrl($scope, $http){
$scope.postTest = function(){

    var data = [obj1, obj2, obj3];
    var jsonData=angular.toJson(data);
    var objectToSerialize={'object':jsonData};

    $http({
        url: 'myURL',
        method: "POST",
        data: $.param(objectToSerialize),
        headers: {
                 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
    }).success(function(data){
        alert("done");
    });
}

}

Ben Hsieh · Accepted Answer · 2016-07-12 07:20:58Z

3

you can use $httpParamSerializer or $httpParamSerializerJQLike

$http(
    url: 'myURL',
    method: "POST",
    data: $httpParamSerializer(data),
)

answered Jul 12, 2016 at 7:20

Ben Hsieh

3401 silver badge8 bronze badges

Collectives™ on Stack Overflow

Pass array of data from Angular $http POST

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Linked

Related