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" }
]
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>
- 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
2 Answers
Reset to default 2You 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>