JSON Array Sends As Null To Controller

Question

I can't seem to find an answer elsewhere in StackOverflow, so I'm asking it now.

I am trying to test an updated PUT in my API for submitting answer data to our database from a Wordpress site. The API works as an intermediary between WP and SQL.

My class:

[DataContract]
public class WordpressAnswerEntry
{
 /// <summary>
 /// Gets or sets the ID of the question the user is submitting an answer for
 /// </summary>
 [DataMember]
 public string QuestionID { get; set; }
 /// <summary>
 /// Gets or sets the data they're submitting
 /// </summary>
 [DataMember]
 public string AnswerData { get; set; }
}

Simple and easy. I've tried with int QuestionID and string

My method:

 [AcceptVerbs("PUT")]
 [Route("api/Questions/{applicationID}/{groupID}")]
 public HttpResponseMessage Put([FromBody] IEnumerable<WordpressAnswerEntry> answerlist, int applicationID = 0, int groupID = 0)

Again, nothing special. I've tried this as a list, and a custom collection class. IEnumerable was my last attempt.

I have an index page in the API that I use to submit tests and see the JSON that is returned. Below is my test case:

 $("#TestQuestionsWithAnswersButton").click(function (e) {
 e.preventDefault();
 var answerEntries = {
 answers:
 [
 { QuestionID: "14",
 AnswerData: "first name" },
 { QuestionID: "15",
 AnswerData: "last name" },
 { QuestionID: "16",
 AnswerData: "email here" },
 { QuestionID: "25",
 AnswerData: "12"
 },
 ]
 }
 var answerlist = {
 answers: answerEntries
 };
 $.ajax({
 type: "PUT",
 url: "api/Questions/0/96",
 data: JSON.stringify(answerlist),
 contentType: "application/json; charset-utf-8",
 dataType: "json",
 success: function (data) {
 $("#ResponseDiv").html(JSON.stringify(data));
 },
 failure: function (errMsg) {
 alert(errMsg);
 }
 });
 });

I have tried everything to get this to work. I have tried with and without the encapsulating "answerList". I have tried with and without stringfy. I have tried with and without {answerlist : answerEntries} and with or without stringfy on that. I've tried it with and without [DataMember] and [DataContract]. I have content type set. I have type set. I don't know what else to do.

Every test returns null for answerlist, every time, without fail. I have no idea what to do now. I can't release it until I can confirm it works but I can't confirm it because it just won't work. I can tell it routes correctly because my breakpoints are hit (and I get a 400, which I return on purpose when answers are null), but for some reason I can't get this JSON array to convert.

• user47589: Look at the request in Fiddler and ensure the JSON payload matches what you expect it to be. You shouldn't ever need to use JSON.stringify with an AJAX request. You likely also have an issue with casing. The JS properties should (probably) be in camelCase, not UpperCase.
• user3559349: You sending an object containing a property named answers (which is an array). None of you method parameters reflect that - you need to send just the array - var answers = [{...}, {...}]; and data: JSON.stringify(answers)
• jfin3204: answerlist is an object with a property called answers that is an object that contains a property of answers that is an array.
• user4650842: Stephen Muecke - thank you! That worked! I don't know why I wrote my array that way initially, but that was the problem. Amy - I do have to call JSON.stringify. Without it, I still get null.

Answer 1

As already mentioned multiple times in the comments,

there is a data type mismatch between what is being sent and what is expected by the controller action.

Update what is being sent from the client to...

var answerList = [
 { QuestionID: "14",
 AnswerData: "first name" },
 { QuestionID: "15",
 AnswerData: "last name" },
 { QuestionID: "16",
 AnswerData: "email here" },
 { QuestionID: "25",
 AnswerData: "12"
 },
];

the ajax call can remain unchanged as the data is being sent with the correct format

Answer 2

Rather than adding your array to an object and then adding that object to another object, just send the stringified array through:

 var answers =
 [
 { QuestionID: "14",
 AnswerData: "first name" },
 { QuestionID: "15",
 AnswerData: "last name" },
 { QuestionID: "16",
 AnswerData: "email here" },
 { QuestionID: "25",
 AnswerData: "12"
 }
 ];

Then in your ajax:

data: JSON.stringify(answers)