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 :

What is status of request in browser dev tools network? Why aren't you passing `data` straight to `$http`? Also missing `method` — charlietfl, Jul 22 '16 at 12:40
method is fine.. but struck how to send to the method which had dictionary object, @charlietfl — Developer, Jul 22 '16 at 12:43
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? — charlietfl, Jul 22 '16 at 12:45
@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? — Nkosi, Jul 27 '16 at 11:57
is it html content UI is not in the Web API project? I mean UI and Web API are different projects? — Sanjay, Jul 28 '16 at 06:33

score 1 · Accepted Answer · answered Jul 28 '16 at 06:39

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

answered Jul 28 '16 at 06:39

Sanjay

1,226
3
21
45

Thanks. It is working now. Added -> var cors = new EnableCorsAttribute("*", "*", "*"); config.EnableCors(cors); in WebApiConfig.cs and resolved. – Developer Jul 28 '16 at 06:59

score 0 · Answer 2 · answered Jul 27 '16 at 11:14

0

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; }
     ...
}

answered Jul 27 '16 at 11:14

fireydude

1,181
10
23

score 0 · Answer 3 · answered Jul 27 '16 at 11:23

0

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

answered Jul 27 '16 at 11:23

Bala Abhinav

1,328
1
9
15

score 0 · Answer 4 · edited May 23 '17 at 11:58

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

how to pass array object to web api method using angularJs

4 Answers4