如何將JSON文件加載到HTML表？使用JavaScript

Question

我的json文件名為“ subject.json”包含：

[
    { "subject":"ProgApps", "codeNo":"9594", "courseNo":"IT 312L", "instructor":"Maria Clemente Concepcion" },
    { "subject":"ITCR", "codeNo":"9615", "courseNo":"IT 014", "instructor":"Jonathan Ramirez" },
    { "subject":"ITP2", "codeNo":"9602", "courseNo":"IT 421", "instructor":"Jonathan Ramirez" }
]

這是我從json文件獲取數據的功能。 但是我不知道如何將其加載到我的表中。 我只是想使其更簡單，因為我已經在這里搜索了一些答案，但是對於初學者來說，它們太復雜了。

function ajaxGetJson() {
    var hr = new XMLHttpRequest();
    hr.open("GET", "scripts/subject.json", true);
    hr.setRequestHeader("Content-type", "application/json", true);
    hr.onreadystatechange = function() {
        if (hr.readyState == 4 && hr.status == 200) {
            var data = JSON.parse(hr.responseText);
        }
    }
    hr.send(null);
 }

我試了幾次，都失敗了。 我只知道如何使用JavaScript，但是由於它們的示例（答案），我也嘗試使用jQuery。 但是我還不能學習jQuery，因為我正在嘗試解決此JavaScript，所以我對jQuery的了解非常有限。

抱歉，RIP英語。

這是我的html文件。 它僅包含表標簽，因為許多人僅使用JavaScript創建表。 我嘗試將標題添加到表中，以便僅加載數據。 那有效嗎？

<body>
    <div class="main-div">
        <h1>Schedule</h1>
        <div id="schedule-container">
                <table id="sched-table"></table>
        </div>
    </div>
</body>

Answer 1

您已加載數據對象。 涼。 現在，只需執行for循環即可打印出一些古邦琴。 這不是完整的代碼段，但您應該從中獲得足夠的好處。

function ajaxGetJson() {
var hr = new XMLHttpRequest();
hr.open("GET", "scripts/subject.json", true);
hr.setRequestHeader("Content-type", "application/json", true);
hr.onreadystatechange = function() {
    if (hr.readyState == 4 && hr.status == 200) {
        var data = JSON.parse(hr.responseText);
        formatToTable(data);
    }
}
hr.send(null);
}

function formatToTable(var data){
    var thisElement = document.getElementById('mytablecontainer');
    thisElement.innerHTML = "<table>";

    for (var x =0; x <len(data); x++){
        thisElement.innerHTML = thisElement.innerHTML + "<tr><td>" + data[x].subject +"</td> <td>" + data[x].codeNo +"</td></tr>";  
    };
    thisElement.innerHTML = thisElement.innerHTML + "</table>";
 }

遵循這些原則應該可以。 Json.parse創建一個具有W3學校中記錄的屬性的對象

Answer 2

您可以嘗試以下方法：

 var data = [ { "subject":"ProgApps", "codeNo":"9594", "courseNo":"IT 312L", "instructor":"Maria Clemente Concepcion" }, { "subject":"ITCR", "codeNo":"9615", "courseNo":"IT 014", "instructor":"Jonathan Ramirez" }, { "subject":"ITP2", "codeNo":"9602", "courseNo":"IT 421", "instructor":"Jonathan Ramirez" } ]; var table = document.getElementById('table'); data.forEach(function(object) { var tr = document.createElement('tr'); tr.innerHTML = '<td>' + object.subject + '</td>' + '<td>' + object.codeNo + '</td>' + '<td>' + object.courseNo + '</td>' + '<td>' + object.instructor + '</td>'; table.appendChild(tr); });

  <table id="table"> <tr> <th>Subject</th> <th>CodeNo</th> <th>courseNo</th> <th>instructor</th> </tr> </table>

如何將JSON文件加載到HTML表？使用JavaScript

問題描述

2 個解決方案

解決方案1
1 2015-04-09 12:17:05

解決方案2
0 2015-04-09 12:20:01

如何將JSON文件加載到HTML表？ 使用JavaScript

問題描述

2 個解決方案

解決方案1 1 2015-04-09 12:17:05

解決方案2 0 2015-04-09 12:20:01

如何將JSON文件加載到HTML表？使用JavaScript

解決方案1
1 2015-04-09 12:17:05

解決方案2
0 2015-04-09 12:20:01