Load Json file with Ajax

Question

How to upload a Json file to my html. The console does not show any error, but no field is filled with 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();
    }

Answer 1

Put the Ids with quotes and tag input you should put .value and not .innerHTML

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

<script>
    function loadDoc() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                json = JSON.parse(this.responseText);

                document.getElementById("aluno").value = json[0].name;
                document.getElementById("serie").value = json[0].degreeId;
                document.getElementById("classe").value = json[0].classId;    }


        };
        xmlhttp.open("GET", "json.json", true);
        xmlhttp.send();
    }
</script>

JSON:

[  
   {  
      "id":1,
      "ra":12346,
      "name":"Pedro Santos Neves",
      "degreeId":1,
      "classId":1
   },
   {  
      "id":2,
      "ra":456798,
      "name":"Maria Antônia Silva",
      "degreeId":2,
      "classId":1
   },
   {  
      "id":3,
      "ra":752156,
      "name":"José Carlos do Prado",
      "degreeId":3,
      "classId":2
   },
   {  
      "id":4,
      "ra":852348,
      "name":"Aparecido Costa Ribeiro",
      "degreeId":4,
      "classId":2
   },
   {  
      "id":5,
      "ra":454643,
      "name":"Mariana Antunes Aguiar",
      "degreeId":6,
      "classId":2
   }
]