Send multiple arrays via Ajax in MVC

Question

I am trying to build an API with 1 string and 5 arrays as parameters:

public List<HomeClass> GetData(string id, string[] price, string[] type, string[] sqft, string[] beds, string[] baths)
{
}

I am using jQuery to call this API like so:

var priceArray = [];
    var typeArray = [];
    var sqftArray = [];
    var bedroomsArray = [];
    var bathroomsArray = [];

function searchInventory(community, price, type, sqft, bedrooms, bathrooms) {

$.get('/api/HomesAPI/' + community + '/' + price + '/' + type + '/' + sqft + '/' + bedrooms + '/' + bathrooms).then(function (result) {

});

}

searchInventory(getURLParameter(window.location.pathname.split('/'))[2], priceArray, typeArray, sqftArray, bedroomsArray, bathroomsArray);

So I am passing 1 string and 5 arrays, but my API is not being called, if I change the array to strings in both .NET and jQuery, it works just fine, but not with arrays. What am I doing wrong?

Here is my route

config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}/{price}/{type}/{sqft}/{beds}/{baths}",
                defaults: new { id = RouteParameter.Optional }
            );

I'd think a route like that is going to expect a single value, not an array. You might need to make the arrays query parameters that aren't part of your path/route. Ask yourself this: What will the url look like? For example, A select multiple tag functions by passing the value multiple times. Which could be a list of string in your controller. ( api/Home/17?X=1&X=2&X=3&X=4 ). See, in that example it can not be in the route. Not every parameter needs be Route defined. — Greg
– Greg, Commented Feb 21, 2017 at 16:31
this is an odd way to call an API. Normally you'd have all these things as one "SearchParams" object, or something like that. And just call "/api/HomesAPI/Search" and pass the SearchParams object as data - which in the case of a GET would be serialised onto the end of the URI. — ADyson
– ADyson, Commented Feb 21, 2017 at 16:31

Mihai Alexandru-Ionut · Accepted Answer · 2017-02-21 20:07:16Z

4

You should use $.param method, in order to serialize your object.

$.param method create a serialized representation of an array, a plain object, or a jQuery object suitable for use in a URL query string or Ajax request.

$.get('/api/HomesAPI',$.param({id:community, price:price, type:type, sqft:sqft, beds:bedrooms , baths:bathrooms },true),function (data) {

});

or you can pass an object to server.

Also, you have to use traditional:true property in order to use the traditional style of parameters serialization.

var data = {
   id: community,
   price:price,
   type:type,
   sqft:sqft,
   beds:bedrooms,
   baths:bathrooms
};

Ajax

$.ajax({
    url: '/api/HomesAPI',
    type: "GET",
    data:data,
    traditional:true
});

Note: You do not need to use another route.

edited Feb 21, 2017 at 20:07

answered Feb 21, 2017 at 16:31

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

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

5 Comments

user979331 Over a year ago

Now my URL looks like this api/HomesAPI?{"id":"Fallingwaters","price":[],"type":[],"sqft":[],"beds":[],"baths":[]} and now it says 404, URL not found

Mihai Alexandru-Ionut Over a year ago

Have you removed your custom route ?

Mihai Alexandru-Ionut Over a year ago

Have you tried the method with JSON.stringify() ?

Mihai Alexandru-Ionut Over a year ago

@user979331, i updated my answer.I tested both methods and works for me.

user979331 Over a year ago

Both ways did not work, I am going to update my question

Collectives™ on Stack Overflow

Send multiple arrays via Ajax in MVC

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related