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

Question

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

I already updated my post. I forgot to post the HTML file. Sorry. — My Name is Totoro
– My Name is Totoro, Commented Apr 9, 2015 at 12:16

TechnicalChaos · Accepted Answer · 2015-04-09 12:44:23Z

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

edited Apr 9, 2015 at 12:44

answered Apr 9, 2015 at 12:17

TechnicalChaos

4523 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TechnicalChaos Over a year ago

Bah you posted the HTML after i'd posted the answer. Still, you should be able to work round it.

jcubic · Accepted Answer · 2015-04-09 12:20:01Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related