Question

我有这个响应输出（类型JSON） - ＆gt;从控制器传递

[[＆＃34; Subash Nisam＆＃34;，test，＆＃34; Medix Care＆＃34;，＆＃34; 2017.03.02＆＃34;，＆＃34; 9.30 am至10.30 am＆＃34; ]，[＆＃34; Subash Nisam＆＃34;，test，＆＃34; Medix Care＆＃34;，＆＃34; 2017.03.02＆＃34;，＆＃34; 3.30 to 5.30＆＃34;]] < / p>

我想使用Javascript - ＆gt;

将其附加到表格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);
            });
    }

}

Answer 1

使用普通javascript（ES6）：

＆＃13;

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(instance => {
  const row = document.createElement('tr');
  tableContent.appendChild(row);
  instance.map(info => {
    const cell = document.createElement('td');
    cell.innerText = info;
    row.appendChild(cell);
  });
});

＆＃13;

<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>

＆＃13;

虽然使用像Angular或React这样的框架来渲染视图会更容易（如果你不需要构建一个完整的应用程序，React更可取）。

Answer 2

我用常规功能替换箭头功能。现在它正常工作。 ------------------------- @ Armen Vardanyan - ＆gt;感谢您的帮助。

这是用常规函数替换箭头函数后的代码。

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将JSON响应输出附加到html表中

2 个答案: