javascript - 如何将 JSON 文件加载到 HTML 表？使用 JavaScript-6ren

javascript - 如何将 JSON 文件加载到 HTML 表？使用 JavaScript

转载作者：行者123 更新时间：2023-12-03 10:23:11

我的 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 的了解非常有限。

抱歉，安息吧英语。

这是我的 html 文件。它只包含表格标签，因为很多人只使用 JavaScript 创建表格。我尝试在表内添加标题，以便仅加载数据。这有效吗？

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

最佳答案

您已加载数据对象。凉爽的。现在只需执行一个 for 循环即可打印出一些 gubbins。这不是完整的片段，但您应该从中获得足够的信息。

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