Jquery Ajax throw error when calling web api action

This is my jquery ajax code which i am using to call web api action.

var baseurl = 'http://localhost:58782/api/Appointments/UserAppointments/[email protected]/'

$.ajax({
url: baseurl,
type: 'GET',
dataType: 'json',
success: function (data, textStatus, xhr) {
    console.log(data);
},
error: function (xhr, textStatus, errorThrown) {
    console.log(textStatus);
}

}).done(function () {


});

This is my web api code which return IEnumerable<Entities.UserAppointments> by System.Net.Http.HttpResponseMessage

Full web API code. It is tested and working. I guess the error is in jquery ajax code.

[System.Web.Http.HttpGet, System.Web.Http.Route("UserAppointments/{email}")]
public System.Net.Http.HttpResponseMessage UserAppointments(string email = null)
{
    System.Net.Http.HttpResponseMessage retObject = null;

    if (!string.IsNullOrEmpty(email))
    {
        UserAppointmentService _appservice = new UserAppointmentService();
        IEnumerable<Entities.UserAppointments> app = _appservice.GetAllUserAppointments(email);

        if (app.Count() <= 0)
        {
            var message = string.Format("No appointment found for the user [{0}]", email);
            HttpError err = new HttpError(message);
            retObject = Request.CreateErrorResponse(System.Net.HttpStatusCode.NotFound, err);
            retObject.ReasonPhrase = message;
        }
        else
        {
            retObject = Request.CreateResponse(System.Net.HttpStatusCode.OK, app);
        }
    }
    else
    {
        var message = string.Format("No email provided");
        HttpError err = new HttpError(message);
        retObject = Request.CreateErrorResponse(System.Net.HttpStatusCode.NotFound, err);
        retObject.ReasonPhrase = message;

    }
    return retObject;
}

public class UserAppointments
{
    public int ID { get; set; }
    public string DoctorName { get; set; }
    public string AvailableDate { get; set; }
    public string AvailableTime { get; set; }
    public string Email { get; set; }
}

My objective is to capture IEnumerable<Entities.UserAppointments> by jquery and iterate in data and append those data in table dynamically.

Please guide me how to do it. thanks