how to post json object array to a web api

Question

How can I post a JSON array to a Web API? It's working for single object.

This is what I've tried, but the controller seems to be returning 0 rather than the expected 3.

This is my JSON:

var sc = [{
              "ID": "5",
              "Patient_ID": "271655b8-c64d-4061-86fc-0d990935316a",
              "Table_ID": "Allergy_Trns",
              "Checksum": "-475090533",
              "LastModified": "2015-01-22T20:08:52.013"
          },
          {
              "ID": "5",
              "Patient_ID": "271655b8-c64d-4061-86fc-0d990935316a",
              "Table_ID": "Allergy_Trns",
              "Checksum": "-475090533",
              "LastModified": "2015-01-22T20:08:52.013"
          },
          {
              "ID": "5",
              "Patient_ID": "271655b8-c64d-4061-86fc-0d990935316a",
              "Table_ID": "Allergy_Trns",
              "Checksum": "-475090533",
              "LastModified": "2015-01-22T20:08:52.013"
          }];

AJAX call:

$.ajax({
           url: urlString,
           type: 'POST',
           data: sc,
           dataType: 'json',
           crossDomain: true,
           cache: false,
           success: function (data) { console.log(data); }
        });

Web API controller:

[HttpPost]
public string PostProducts([FromBody]List<SyncingControl> persons)
{
    return persons.Count.ToString(); // 0, expected 3
}

I don't imagine this is it, but have you tried using dev tools in the browser to just confirm that the payload is even being sent? I know nothing about Web API so perhaps this isn't the most likely cause, but I can imagine something client-side setting `sc` equal to `null` before the request gets fired off, which seems like it could do this. — Matthew Haugen, Jan 23 '15 at 09:46
Any errors in the browser console? You are missing a double quote in the first person object in sc. — Joel Gregory, Jan 23 '15 at 09:53

hutchonoid · Accepted Answer · 2015-01-23T10:45:35.297

19

There is an error in the json Table_ID": "Allergy_Trns" should be "Table_ID": "Allergy_Trns".

Missing double quote.

Update

You need to make sure that you are sending your parameters as json as follows:

 $.ajax({
        url: urlString,
        type: 'POST',
        data: JSON.stringify(sc),
        dataType: 'json',
        contentType: 'application/json',
        crossDomain: true,
        cache: false,
        success: function (data) { console.log(data); }
    });

Notice the JSON.stringify(sc), @herbi is partly correct too about specifying a content type.

Screen grab

**Screen grab**

edited Jan 23 '15 at 10:45

answered Jan 23 '15 at 09:52

hutchonoid

32,982
15
99
104

hutchonoid: its missed here not in my code sorry for that. – Ranvijay Singh Jan 23 '15 at 09:54

Herbi · Answer 2 · 2015-01-23T10:31:11.283

2

You have to add the content-type header to the ajax request, so that WebAPI is able to understand the request and use the correct formatter to deserialize the data:

$.ajax({
           url: urlString,
           type: 'POST',
           data: sc,
           dataType: 'json',
           contentType: "application/json",
           crossDomain: true,
           cache: false,
           success: function (data) { console.log(data); }
        });

edited Jan 23 '15 at 10:31

answered Jan 23 '15 at 10:08

Herbi

103
8

sorry, it is "contentType", not "content-Type" – Herbi Jan 23 '15 at 10:31

score 1 · Answer 3 · edited Jan 08 '16 at 13:46

You can set the Content-Type on beforeSend which will insure that your json data matches with your server object

$.ajax({
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        },
           url: urlString,
           type: 'POST',
           data: sc,
           dataType: 'json',
           contentType: "application/json",
           crossDomain: true,
           cache: false,
           success: function (data) { console.log(data); }
        });

how to post json object array to a web api

3 Answers3

Linked

Related