JQuery AJAX: How to iterate in json and build html

Question

This question already has an answer here:

• Using jQuery to build table rows from AJAX response(json) 12 answers

I have to iterate in json and build html table where i need to append rows.

<table id="tblAppointments" class="table table-striped">
    <thead class="thead-dark">
    <tr>
        <th scope="col">Doctor Name</th>
        <th scope="col">Available Date</th>
        <th scope="col">Available Time</th>
    </tr>
    </thead>
 </table>

this is my jquery code

$(document).ready(function () {
    var useremail = encodeURIComponent('@User.Identity.Name');
    alert(useremail);
    var baseurl = '@ConfigurationManager.AppSettings["baseAddress"]' + 'api/Appointments/UserAppointments/' + useremail + '/';
    //var baseurl = 'http://localhost:58782/api/Appointments/UserAppointments/tridip%40gmail.com/'
    alert(baseurl);

    $("#ddldoc").change(function () {
        if (this.value != '') {

            alert(useremail + '  ' + this.value);
            //$("#tblAppointments").find("tr:gt(0)").remove();

            $.ajax({
                url: baseurl,
                type: 'GET',
                dataType: 'json',
                success: function (data, textStatus, xhr) {
                    console.log(data);
                },
                error: function (xhr, textStatus, errorThrown) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert('errr------'+err.Message);
                    console.log(textStatus);
                }

            }).done(function () {


            });
        }
    });
}); 

Web api which return many data means IEnumerable<Entities.UserAppointments>.

   [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; }
}

json looks like ​

0: Object { ID: 1, DoctorName: "Dr Debasis Saha", AvailableDate: "01/05/2018", … }
​
1: Object { ID: 1, DoctorName: "Dr Debasis Saha", AvailableDate: "10/05/2018", … }
​
2: Object { ID: 2, DoctorName: "Dr HS Pathak", AvailableDate: "03/05/2018", … }
​
3: Object { ID: 2, DoctorName: "Dr HS Pathak", AvailableDate: "05/05/2018", … }
​
4: Object { ID: 3, DoctorName: "Dr Sumana Das", AvailableDate: "12/05/2018", … }
​
5: Object { ID: 3, DoctorName: "Dr Sumana Das", AvailableDate: "14/05/2018", … }

please guide me what to change and add in jquery as a result i can iterate in json return by web api and add table row to show list of UserAppointments.

Thanks

Answer 1

Simply you can add row by using your table id like that.

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

             $("#tblAppointments > tbody")
             .append("<tr><td>"  data.DoctorName  "</td><td>" 
               data.AvailableDate  "</td></tr>");

            },
            error: function (xhr, textStatus, errorThrown) {
                var err = eval("(" + xhr.responseText + ")");
                alert('errr------'+err.Message);
                console.log(textStatus);
            }

        }).done(function () {


        });

I hope this will help, if doesn't please comment below.