Post an array of objects to WebAPI using jQuery

Kevin Wilson

This is quite niche but caught me out the other day.

Let’s say you have a person entity:

public class Person
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
}

and you have a WebAPI method that takes in a group:

public class UsersController : ApiController
{
    public IEnumerable<Person>Post(IEnumerable<Person> persons)
    {
        // do some registration work
    }
}

You create your call in JavaScript something like this:

var people = [];
people.push({ name: "Kev", age: 32 });
people.push({ name: "Ian", age: 31 });
people.push({ name: "Garry", age: 32 });

var request = $.ajax({
    dataType: "json",
    url: "/api/users",
    method: "POST",
    data: people
});

You POST that to the API and you get… an empty array. Not great.

jQuery quirk

Turns out this is a known issue and the fix is pretty simple.

Change your data to be a single anonymous object instead of a raw array and it’ll work. So this:

var request = $.ajax({
    dataType: "json",
    url: "/api/users",
    method: "POST",
    data: { '': people }
});

Easy.

Kevin Wilson

.NET developer, JavaScript enthusiast, Android user, Pebble wearer, sometime musician and occasional cook.

18 thoughts on “Post an array of objects to WebAPI using jQuery”

  1. hi kevin

    nice to meet you here
    I have the same issue makes me mad see below

    $.ajax({
    url: ‘http://localhost:49834/api/contacts/’,
    type: “POST”,
    dataType: ‘jsonp’,
    data:{”: JSON.stringify(contact)},
    crossDomain: true,
    contentType: “application/json;charset=utf-8”,
    })

    data is disappeared. do you have any ideas? thanks

    Reply

    1. If you’re posting a JSON object, you’ll not need to convert it to a string. In your example, you’re posting an object containing a single string to the server. I’m not 100% sure but I don’t think model binding will work for that.

      Try posting your data as:

      data: {'': contact }

      Also (just noticed when copying your code), you’ve used a double quote rather than two single quotes:

      data: {'': contact } rather than data: {": contact }

      Reply

  2. Hmm weird I get same issue, but even after changing after to single anonymous object!. Same syntax as you – data: {”: contact }

    I always get an empty list passed to the controller method. Driving me crazy.

    Reply

  3. Hi Chalky,
    I am also in the same boat. tried the same way as described in the artice .. still no luck .. any solution to this ?

    Reply

  6. Thanks for the tip, it started working for me when I did this, and then mysteriously stopped working again for no apparent reason – now my IEnumerable is null.

    Reply

  15. it will be ok, if you post data like this.

    $.ajax({
    url: ‘http://localhost:49834/api/contacts/’,
    type: “POST”,
    contentType: ‘application/json; charset=utf-8’,
    data:JSON.stringify(contact)}
    })

    Reply

  17. Hi Kevin,

    I was also struggling with this issue and thanks to you. Taking it as single anonymous object approach worked.

    var request = $.ajax({
    dataType: “json”,
    url: “/api/users”,
    method: “POST”,
    data: { ”: people }
    });

    I tried so many ways but didn’t work .
    Can you please explain a bit about this? what is happening behind the scene?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *