jQuery AJAX:如何在json中迭代并构建html表 [英] JQuery AJAX: How to iterate in json and build html table

问题描述

我必须遍历json并构建需要添加行的html表.

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>

这是我的jquery代码

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表示IEnumerable<Entities.UserAppointments>.

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看起来像

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", … }

请指导我更改和添加jquery的内容，以便可以通过Web api迭代json返回，并将表行添加到显示UserAppointments的列表.

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.

谢谢

推荐答案

您只需使用表ID即可添加行.

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.

这篇关于jQuery AJAX:如何在json中迭代并构建html表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！