javascript - 如何使用 Javascript 将 JSON 响应输出附加到 html 表中

标签 javascript html ajax html-table response

我有这个响应输出(JSON 类型)--> 从 Controller 传递

[[“Subash Nisam”,测试,“Medix Care”,“2017.03.02”,“上午 9.30 至 10.30”],[“Subash Nisam”,测试,“Medix Care”,“2017.03.02” ,“3.30 至 5.30”]]

我想使用 Javascript 将其附加到表 tbody 后面-->

<table class="table table-bordered table-hover" id="doctorresultTable">
    <thead>
        <tr>
            <th>Doctor Name</th>
            <th>Speciality</th>
            <th>Hospital</th>
            <th>Date</th>
            <th>Time</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

我该怎么做?

这是我的 JS 代码:

function searchbyNameandDate(name, avadate) {
    var ajaxConfig = {
        type: "GET",
        url: "searchbyNameandDate?name=" + name + "&date=" + avadate,
        async: true,
        dataType: "json"
    };
    $.ajax(ajaxConfig)
            .done(function (response) {

                for (var i = 0; i < response.length; i++) {
                    for (var j = 0; j < 4; j++) {

                        var html = "<tr> \
                <td>" + response[i][j] + "</td> \
                <td>" + response[i][j] + "</td>\
                <td>" + response[i][j] + "</td> \
                <td>" + response[i][j] + "</td> \
                <td>" + response[i][j] + "</td> \
            </tr>";
                        $("#doctorresultTable tbody").append(html);
                    }

                }


            })
            .fail(function (xhr, status, errorMessage) {
                alert("failed to load data");
                console.log("XML HTTP REQUEST : " + xhr);
                console.log("Status : " + status);
                console.log("Error message : " + errorMessage);
            });
    }

}

最佳答案

我用常用函数替换了箭头函数。 现在可以正常工作了。 -------------------------@Armen Vardanyan ->感谢您的帮助。

这是用普通函数替换箭头函数后的代码。

const data = [["Subash Nisam",'test',"Medix Care","2017.03.02","9.30 am to 10.30 am"],["Subash Nisam",'test',"Medix Care","2017.03.02","3.30 to 5.30"]];

var tableContent = document.querySelector('#doctorresultTable > tbody');
data.map(function(instance) {
 const row = document.createElement('tr');
 tableContent.appendChild(row);
 instance.map(function(info) {
  const cell = document.createElement('td');
  cell.innerText = info;
  row.appendChild(cell);
 });
});

关于javascript - 如何使用 Javascript 将 JSON 响应输出附加到 html 表中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47000632/

相关文章:

javascript - 如果 2 个跨度有数据,则添加字符

javascript - 动画 CSS 进度条

php - 检查用户名和密码后重定向 ajax 调用

php - jQuery/jqGrids/提交表单数据烦恼

javascript - 当ajax调用未完成时,如何阻止用户再次点击链接?

javascript - xml_http.onreadystatechange 不是一个函数

javascript - Dropzone JS 提交点击上传

javascript - 如何循环该数组以仅提取 orderTotal?

html - 将 Material-UI 文本字段与段落对齐

html - HTML5 Canvas 游戏甚至无法在PC上的Newgrounds上预加载,但可以在iPad上运行。