JSON array object passed from AngularJs , received as null in ASP.NET Web API controller

Question

I am trying to post a JSON array (stuanswer) from AngularJs to my ASP.NET web api controller. However I get it as null in the controller (List<StuAnswerViewModel> answer). I ensured browser debugging, to check if json array has data in it and it has. ID column is autoincremented in the database, hence I am not passing the value. Even when I tried passing ID from json, still getting null.

I am not able to understand what is missing. Can you please help? THE JSON REQUEST header taken from network tab is

Request URL: http://localhost:1487/api/test/saveans Referrer Policy: strict-origin-when-cross-origin Accept: application/json, text/plain, / Accept-Encoding: gzip, deflate, br Accept-Language: en-US,en;q=0.9 Connection: keep-alive Content-Length: 937 Content-Type: application/json;charset=UTF-8 Cookie: repository=%7B%22loggedUser%22%3A%7B%22username%22%3A%22test%22%2C%22authdata%22%3A%22dW5kZWZpbmVkOnVuZGVmaW5lZA%3D%3D%22%2C%22Userid%22%3A1%2C%22Medium%22%3A%221%22%7D%7D Host: localhost:1487 Origin: http://localhost:1487 Referer: http://localhost:1487/ sec-ch-ua: "Chromium";v="92", " Not A;Brand";v="99", "Google Chrome";v="92" sec-ch-ua-mobile: ?0 Sec-Fetch-Dest: empty Sec-Fetch-Mode: cors Sec-Fetch-Site: same-origin User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36 {0: {QuesID: 1, StudentId: 2, TestId: 1, GivenAnswer: 1, TestTakenDate: "01-01-01"},…} 0: {QuesID: 1, StudentId: 2, TestId: 1, GivenAnswer: 1, TestTakenDate: "01-01-01"} 1: {QuesID: 1, StudentId: 2, TestId: 1, GivenAnswer: 1, TestTakenDate: "01-01-01"} 2: {QuesID: 1, StudentId: 2, TestId: 1, GivenAnswer: 1, TestTakenDate: "01-01-01"} 3: {QuesID: 1, StudentId: 2, TestId: 1, GivenAnswer: 1, TestTakenDate: "01-01-01"} 4: {QuesID: 1, StudentId: 2, TestId: 1, GivenAnswer: 1, TestTakenDate: "01-01-01"} 5: {QuesID: 1, StudentId: 2, TestId: 1, GivenAnswer: 1, TestTakenDate: "01-01-01"} 6: {QuesID: 1, StudentId: 2, TestId: 1, GivenAnswer: 1, TestTakenDate: "01-01-01"} 7: {QuesID: 1, StudentId: 2, TestId: 1, GivenAnswer: 1, TestTakenDate: "01-01-01"} 8: {QuesID: 1, StudentId: 2, TestId: 1, GivenAnswer: 1, TestTakenDate: "01-01-01"} 9: {QuesID: 1, StudentId: 2, TestId: 1, GivenAnswer: 1, TestTakenDate: "01-01-01"} 10: {QuesID: 1, StudentId: 2, TestId: 1, GivenAnswer: 1, TestTakenDate: "01-01-01"} The request headers copied from the browser are

GET /Scripts/spa/Student/quesCtrl.js HTTP/1.1 Host: localhost:1487 Connection: keep-alive Pragma: no-cache Cache-Control: no-cache sec-ch-ua: "Chromium";v="92", " Not A;Brand";v="99", "Google Chrome";v="92" sec-ch-ua-mobile: ?0 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36 Accept: / Sec-Fetch-Site: same-origin Sec-Fetch-Mode: no-cors Sec-Fetch-Dest: script Referer: http://localhost:1487/ Accept-Encoding: gzip, deflate, br Accept-Language: en-US,en;q=0.9

[HttpPost]
[Route("saveans")]
public HttpResponseMessage SaveAnswer(HttpRequestMessage request, [FromBody] List<StuAnswerViewModel> answer)
{
    return CreateHttpResponse(request, () =>
        {
            HttpResponseMessage response = null;
        }
}

public class StuAnswer
{
    public StuAnswer()
    {
        // Answers = new List<Answer>();
    }

    public int ID { get; set; }
    public DateTime TestTakenDate { get; set; }
    public int StudentId { get; set; }
    public int TestId { get; set; }
    public int QuesID { get; set; }
    public int GivenAnswer { get; set; }
}

function test()
{
    for (var i = 0; i < qLength; i++) 
    {
        $scope.stuanswer[i] = 
            {
                QuesID: 1,
                StudentId: 2,
                TestId:1,
                GivenAnswer: 1,
                TestTakenDate: '01-01-01'
            }               
     }

     apiService.post('/api/test/saveans', $scope.stuanswer,
            saveansSucceded,
            saveansFailed);
     }

Can you do the following? Open your website in the browser - In the browser press F12 - Go to the **network** tab - trigger the request - select the request - copy the request body and paste it in the question too. If you know how to use postman or a similar tool, try to post the json string and see if this also is a problem? — Pieterjan, Aug 28 '21 at 15:26
I have included the request headers taken from the browser @Pieterjan — ArunVijai, Aug 28 '21 at 15:42
Sorry you posted the wrong request. We need the **request body** of **saveans** — Pieterjan, Aug 28 '21 at 15:51
Okay it seems that angularjs takes `stuanswer` as an object instead of an array. — Pieterjan, Aug 28 '21 at 18:22
I think [this answer](https://stackoverflow.com/a/37648825/8941307) should solve your problem. `let answers = []; Object.keys($scope.stuanswer).forEach((index, answer) => answers.push(answer); apiService.post('/api/test/saveans', answers, ...);` — Pieterjan, Aug 28 '21 at 18:40

Serge · Answer 1 · 2021-08-28T15:54:46.053

0

try this

public IActionResult SaveAnswer( [FromBody] List<StuAnswer> answer)
    {
       return Ok("sucess");
    }

edited Aug 28 '21 at 15:54

answered Aug 28 '21 at 15:22

Serge

40,935
4
18
45

this is web api controller, hence I am not using ActionResult. hope it makes sense – ArunVijai Aug 28 '21 at 15:34
@ArunVijai Try and let me know the result – Serge Aug 28 '21 at 15:43

JSON array object passed from AngularJs , received as null in ASP.NET Web API controller

1 Answers1