How do I load a Json file into my html. The console does not show any errors, but no field is populated with the data from the Json file.
<h3 class="center">Tela de alunos</h3>
<div class="container">
<form class="col s12">
<div class="row">
<div class="input-field col s5 offset-s1">
<input placeholder="Nome do aluno" id="aluno" type="text" class="validate">
<label for="aluno"></label>
</div>
<div class="input-field col s3">
<input placeholder="Série" id=serie type="text" class="validate">
<label for="serie"></label>
</div>
<div class="input-field col s1">
<input placeholder="Classe" id=classe type="text" class="center validate">
<label for="classe"></label>
</div>
</div>
</form>
</div>
<div class="container">
<div class="col s12 l6">
<div class="row">
<a class="waves-effect waves-light btn left" onclick="loadDoc()">Carregar</a>
<a class="waves-effect waves-light btn right">Editar</a>
</div>
</div>
</div>
Follow the Javascript
function loadDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var students = JSON.parse(this.responseText);
var degrees = JSON.parse(this.responseText);
var classes = JSON.parse(this.responseText);
document.getElementById("aluno").value = students[0].name;
document.getElementById("serie").value = degrees[0].degreeId;
document.getElementById("classe").value = classes[0].classId;
}
};
xmlhttp.open("GET", "students.json", true);
xmlhttp.send();
}