how to pass array object to web api method using angularJs

Question

I am creating a client-side script to send a dictionary object type to the web api method using $http as follows:

 $scope.SearchPolicyDetails = function (data) {
 var searchPolicy = new Array();
 searchPolicy["InsuredName"] = data.InsuredName;
 searchPolicy["PostalCode"] = data.PostalCode;
 searchPolicy["LOB"] = data.LOB;
 searchPolicy["AgencyName"] = data.AgencyName;
 searchPolicy["Symbol"] = data.Symbol;
 searchPolicy["PolicyNum"] = data.PolicyNum;
 searchPolicy["MCO"] = data.MCO;
 searchPolicy["expireswithin"] = data.expireswithin;
 searchPolicy["SortFields"] = data.SortFields;
 searchPolicy["SortOrder"] = data.SortOrder;
 $http({
 url: "http://localhost:53054/api/GetPoliciesBySearch",
 dataType: 'json',
 data: searchPolicy,
 headers: {
 "Content-Type": "application/json"
 }
 }).success(function (response) {
 $scope.value = response;
 })
};

and I have this WebAPI method:

 public List<Dictionary<string,string>> GetPoliciesBySearch(Dictionary<string,string> policySearch)
 {
 return SpecializedHandler.GetAllPolicies(policySearch).IterativeResource;
 }

But I am not receiving the object to the method.

I am seeing this error in the chrome console :

enter image description here

• charlietfl: What is status of request in browser dev tools network? Why aren't you passing data straight to $http? Also missing method
• Developer: method is fine.. but struck how to send to the method which had dictionary object, @charlietfl
• charlietfl: so what do you see in browser dev tools network? Don't see how method can be fine when it is missing either. Also why aren't you using an error handler?
• Developer: I have modified and add pic in my post. @charlietfl
• Nkosi: @DotNetDeveloper. Is this call suppose to be POST or GET. I am assuming based on naming convention, that you are trying to do a GET?

Answer 1

I think your code and UI are in different projects, might be you have not configured CORS in web.config or WebApiConfig.cs. You can follow this URL

https://msdn.microsoft.com/en-us/magazine/dn532203.aspx

• Developer: Thanks. It is working now. Added -> var cors = new EnableCorsAttribute("", "", "*"); config.EnableCors(cors); in WebApiConfig.cs and resolved.

Answer 2

Instead of using a dictionary in your API action you need to define a class and use that.

class PolicyRequest 
{
 public string InsuredName { get; set; }
 public string PostalCode { get; set; }
 public string LOB { get; set; }
 ...
}

Answer 3

searchPolicy["InsuredName"] = searchPolicy.InsuredName. This is not an array but a json object with attributes like InsuredName and so. to make it into an array. You can do : var searchPolicy = []; searchPolicy.push(data.InsuredName);

Answer 4

Looks like there are multiple things to consider here:

First: The object being created clientside isn't going to translate to a List<Dictionary<string, string>> so for this to work as we would like we will have to make some alterations. Consider:

var searchPolicy = {};
searchPolicy['InsuredName'] = data.InsuredName;
searchPolicy['PostalCode'] = data.PostalCode;
//etc (see below for another crucial piece) 

Second: The code calling inside of the $http isn't targeting any particular method (see the docs). Consider something along the lines of:

$http({
 url: "http://localhost:53054/api/GetPoliciesBySearch",
 dataType: 'json',
 method: 'POST',
 data: JSON.stringify(searchPolicy),
 headers: {
 "Content-Type": "application/json"
 }
}).then(successHandler, errorHandler);
//try to avoid the deprecated success / error functions
function successHandler(response){
 $scope.value = response;
}
function errorHandler(response){
 //I strongly consider this for debugging
 console.log(response);
}

Third: Consider accepting a standard Dictionary<string, string> in the WebAPI controller since the new object shouldn't be a list of dictionaries but rather a flat dictionary. (this answer may provide more context)

Finally: It looks like routing might be confused judging from the error messages; ensure that there is a route setup in the WebApiConfig.cs similar to:

RouteTable.Routes.MapHttpRoute("GetPoliciesBySearch",
 "api/getpoliciesbysearch",
 defaults: new 
 {
 controller = "{your controller name here}", 
 action = "GetPoliciesBySearch"
 });