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 :

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

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" });