How to pass in a JSON object to a resource in angularjs

Question

I would like to use a web-service that takes in JSON object (The object binds two arrays) in a POST request and returns a JSON object array.

I would now like to send request to the webservice from my AngularJS. Here is my code:

wellApp.factory('Search', ['$resource',function($resource){

    return $resource('/filetables/searchdata/:tagSearchInput',
            {
            },
            {
                searchData:{
                    method:'POST',
                    isArray: true,
                    params:{ tag: '@tagSearchInput.tag',
                            details: '@tagSearchInput.details'
                    }
                }
            })

}])


function myWellsCtrl($scope,$resource, Wells, Tags, Search) {

    $scope.wellSearchResult = Search.searchData({tag: ["TypeOfWell"],
                                                 details: ["Vertical"]});
};

If I do this, I get a NullPointerException at the server side, meaning that the arguments that I pass are getting passed as null.

How do I pass in this object such that the server interprets them as an object containing two arrays. I'm new to AngularJS and am not able to understand the @ notation of assigning the incoming parameter. It'd be great if someone here can lend me some help.

Answer 1

You shouldn't need to include params in searchData since the JSON will be sent in the body of the POST request. Try removing them from searchData. Then in your controller, try calling your service like this:

Search.searchData({}, {tag: ["TypeOfWell"], details: ["Vertical"]})

Note the {} as the first parameter, which is the params for your request. The second {} is for the payload. This will send your JSON in the request payload instead of as params. Let me know if that doesn't work for you. I have done something similar to what you're doing and this way worked for me.

Answer 2

You didn't mention which server side you are using. But, the first thing you probably need to do is set the HTTP Header content type. I usually set it globally on the $http object, like this:

$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

With the default content-type header, the form parameters are not attached to the request as form parameters and they cannot be accessed as form parameters on the server side code.

Second, this:

{ 
  tag: '@tagSearchInput.tag',
  details: '@tagSearchInput.details'
}

is not a valid JSON object. The property names must be enclosed in double quotes. Here they are enclosed in none. The property values must also be enclosed in single quotes; here they are enclosed in single quotes.

I believe that should be a valid JavaScript object; but it isn't JSON. You can tweak it here:

{ 
  "tag": "@tagSearchInput.tag",
  "details": "@tagSearchInput.details"
}

I wrote up a blog post about my experiences integrating AngularJS with ColdFusion. What I have been doing is converting my objects to JSON Strings before passing them over the wire. Then the server side will deserialize the JSON string.

Here is a great post, similar to mine, that is PHP focused.