How To Load JSON file to a HTML Table? Using JavaScript

My json file, named as "subject.json" contains:

[
    { "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" }
]

This is my function to get data from my json file. But I don't know how load it into my table. I just want to make it more simple because I already search some answers here but they're too plicated for me as a beginner.

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

I tried several times and all failed. I only know how to use JavaScript but I also tried using jQuery because of their example (answers). But I can't learn jQuery yet because I'm trying to solve this JavaScript so my knowledge about jQuery is very limited.

Sorry RIP English.

This is my html file. It only includes table tag since many people create table just using JavaScript. I attempt to add the headers inside the table so that only data will be loaded. Is that valid?

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

My json file, named as "subject.json" contains:

[
    { "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" }
]

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

Sorry RIP English.

This is my html file. It only includes table tag since many people create table just using JavaScript. I attempt to add the headers inside the table so that only data will be loaded. Is that valid?

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

Share Improve this question edited Apr 9, 2015 at 12:12 asked Apr 9, 2015 at 12:03 My Name is Totoro 211 silver badge4 bronze badges

Create a plunker for this... – Reena Commented Apr 9, 2015 at 12:05
How your table should look like, can you show html? – jcubic Commented Apr 9, 2015 at 12:06
I already updated my post. I forgot to post the HTML file. Sorry. – My Name is Totoro Commented Apr 9, 2015 at 12:16

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

You have your data object loaded. Cool. Now just do a for loop to print out some gubbins. This is not a full snippet but you should get enough from it.

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

Something along those lines should do. Json.parse creates an object with attributes such as documented in w3 schools

You can try this:

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>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745412130a4626582.html

How To Load JSON file to a HTML Table? Using JavaScript - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

How To Load JSON file to a HTML Table? Using JavaScript - Stack Overflow

2 Answers 2

相关推荐