$http GET Receiving Empty Body

Question

I have a GET method in angularjs that receives data from an API controller in C#. The controller is returning the data and the $http get method is receiving a response, but the response content body is empty.

My HttpGet API controller function:

[HttpGet]
[Route("api/LandingPage/GetByDate")]
public HttpResponseMessage GetByDate(DateTime startDate, DateTime endDate)
{
    try
    {
        var startDateParam = new SqlParameter("@startDate", startDate);
        var endDateParam = new SqlParameter("@endDate", endDate);

        var confirmData = m_databaseObject.Database.SqlQuery<PageModel>("[dbo].[GetPageData] @startDate,@endDate", startDateParam, endDateParam).ToList();

        return Request.CreateResponse(HttpStatusCode.OK, confirmData);
    }
    catch (Exception e)
    {
        return Request.CreateErrorResponse(HttpStatusCode.NotFound, $"Error occured {e.Message} {startDate:yyyy-MM-dd} {endDate:yyyy-MM-dd}");
    }
}

The object I want to return:

public class PageModel
{
    string Name { get; set; }
    int? FirstTotal { get; set; }
    int? FisrtInitial { get; set; }
    int? FisrtApproval { get; set; }
    int? SecondTotal { get; set; }
    int? SecondInitial { get; set; }
    int? SecondApproval { get; set; }
    int? Validated { get; set; }
    int? NotSettled { get; set; }
}

The GET method:

this.getLandingPage = function ($scope) {
    $scope.error = "";
    $scope.message = "";
    return $http({
        method: "GET",
        url: apiName + "LandingPage/GetByDate?startDate=" + $scope.StartDate + "&endDate=" + $scope.EndDate,
        headers: { 'Content-Type': 'application/json' }
    }).success(function (data) {
        if (data.length === 0)
            $scope.message = "No Data found";
        else {
            $scope.LandingPageData = data;
        }
    }).error(function (error) {
        $scope.LandingPageData = null;
        if (error)
            $scope.error = error.Message;
        else
            $scope.error = "Data services may not be running, Please check!";
    })
}

My confirmData variable in my controller contains data when the function returns. My angularjs GET method returns success with data.length equal to 1, but there are no values contained in data .

Can anyone shed some light on why my data is not being transferred properly?

Answer 1

It turned out that my PageModel class variables needed to be declared as public in order to pass the data from the controller.

Changing the PageModel class to this worked:

public class PageModel
{
    public string Name { get; set; }
    public int? FirstTotal { get; set; }
    public int? FisrtInitial { get; set; }
    public int? FisrtApproval { get; set; }
    public int? SecondTotal { get; set; }
    public int? SecondInitial { get; set; }
    public int? SecondApproval { get; set; }
    public int? Validated { get; set; }
    public int? NotSettled { get; set; }
}

Answer 2

Try to return JSON instead HttpResponseMessage :

[HttpGet]
[Route("api/LandingPage/GetByDate")]
public JsonResult GetByDate(DateTime startDate, DateTime endDate)
{
    try
    {
        var startDateParam = new SqlParameter("@startDate", startDate);
        var endDateParam = new SqlParameter("@endDate", endDate);

        var confirmData = m_databaseObject.Database.SqlQuery<PageModel>("[dbo].[GetPageData] @startDate,@endDate", startDateParam, endDateParam).ToList();

        return new JsonResult() { Data = confirmData , JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }
    catch (Exception e)
    {
        throw;
    }
}

On client side your data should be placed in response data property. In your case it should be:

data.data

But please try to use then function intead success function:

.then(function (data) {
        var result = data.data;
    });

Even you can avoid JsonResult and use string . Serialize your model into JSON string and return string.

Answer 3

Generally the data is nested under the data property.

.success(function (resp) {
    if (resp.data.length === 0)
        $scope.message = "No Data found";
    else {
        $scope.LandingPageData = resp.data;
    }
})

Answer 4

Which version of angular are you using? From 1.6 .success is deprecated:

• Why are angular $http success/error methods deprecated? Removed from v1.6?
• https://docs.angularjs.org/api/ng/service/ $http

And, any specific reason why you are setting the Content-type header? You may use a simpler way:

return $http.get(url: apiName + "LandingPage/GetByDate?startDate=" + $scope.StartDate + "&endDate=" + $scope.EndDate, ).then(successCallback, errorCallback);

And then define your callback functions separately.