Passing JSON Array from Javascript to Web API Controller method

Question

I was not able to get the JSON array parameters in web api controller method (SaveDetails).
Here are my code.

JavaScript Code:

  $.ajax(
    {
        url  : "api/Test/SaveDetails",
        type : "POST",
        data : {
                    "employees":
                    [
                        { "firstName": "John", "lastName": "Doe" },
                        { "firstName": "Anna", "lastName": "Smith" },
                        { "firstName": "Peter", "lastName": "Jones" }
                    ]
                },
        success: function (data) {alert("success");},
        error: function () {alert("Error");}
    })

Controller method

[HttpPost]
public DataSet SaveDetails(Models.Person[] obj)
{
    //save opertion.    
}

Model Method:

 public class Person
{
    public string firstName { get; set; }
    public string lastName { get; set; }
}

What are the changes to be made to get the JSON array parameters in web api method.

Did you try POSTing your data as JSON (see stackoverflow.com/questions/5570747/jquery-posting-json)? Then in your controller you can retrieve this data from the request body using [FromBody] attribute. — Nikolai Samteladze
– Nikolai Samteladze, Commented Oct 21, 2014 at 14:39

Veera · Accepted Answer · 2014-10-24 07:12:42Z

11

Try the following code:

Declare the model method as follows:

public class Models.employees
{
    public string firstName { get; set; }
    public string lastName { get; set; }
}

public class Models.RootObject
{
    public List<employees> employees { get; set; }
}

Controller:

[HttpPost]
public DataSet SaveDetails([FromBody]RootObject Person)
{
    //save opertion.    
}

Here comes the expected Result: Output

answered Oct 24, 2014 at 7:12

Veera

3,4922 gold badges16 silver badges27 bronze badges

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

1 Comment

Métoule Over a year ago

Important note: the model class has to have a default constructor + public setters, otherwise this will not work.

ascriven · Accepted Answer · 2019-09-26 20:41:35Z

I ran across this thread when searching for an answer to my problem, trying to pass a list/array of object to a web api controller.

Details at this link: https://kwilson.io/blog/post-an-array-of-objects-to-webapi-using-jquery/

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

So in your case you might do the following for your data

data : {
                "":
                [
                    { "firstName": "John", "lastName": "Doe" },
                    { "firstName": "Anna", "lastName": "Smith" },
                    { "firstName": "Peter", "lastName": "Jones" }
                ]
            },

And in your Web API controller

[HttpPost]
public DataSet SaveDetails(List<Models.Person> obj)
{
    //save operation.    
}

This way you don't have to create another class to hold a list object like in Veera's answer.

Melih Mucuk · Accepted Answer · 2014-10-21 15:27:47Z

try like this:

$.ajax(
    {
        url  : "api/Test/SaveDetails",
        type : "POST",
        contentType : 'application/json',
        data : {
                    "obj":
                    [
                        { "firstName": "John", "lastName": "Doe" },
                        { "firstName": "Anna", "lastName": "Smith" },
                        { "firstName": "Peter", "lastName": "Jones" }
                    ]
                },
        success: function (data) {alert("success");},
        error: function () {alert("Error");}
    })

Controller:

[HttpPost]
public DataSet SaveDetails([FromBody]Models.Person[] obj)
{
    //save opertion.    
}

Collectives™ on Stack Overflow

Passing JSON Array from Javascript to Web API Controller method

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related