How to repeat Json data in a list

Question

How to list all students(name), series(degreeId) and classes(classId) in this Json file.

[
{
    "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
},
{
    "id":6,
    "ra":192837,
    "name":"Ester Faria de Cassio",
    "degreeId":5,
    "classId":2
} ]

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

Follows the HTML

<div class="container">
    <form class="col l12 s12">
        <div class="row">
            <div class="input-field col l6 s7">
                <input placeholder="Aluno" id="aluno" type="text" class="validate">
                <label for="aluno"></label>
            </div>
            <div class="input-field col l3 s2">
                <input placeholder="Série" id="serie" type="text" class="center validate">
                <label for="serie"></label>
            </div>  
            <div class="input-field col l3 s2">
                <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">
        <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>

Screenshot of the screen to load inputs

Answer 1

It is only necessary to do the parse once, and in your case was doing several times. As is a list of students you get can use a forEach to go through all and show the corresponding fields of each student so:

let students = JSON.parse(this.responseText);

for (let s of students){
    console.log(s.name + " " + s.degreeId + " " + s.classId);
}

Or if you want to use Arrow functions and literals template

let students = JSON.parse(this.responseText);

students.forEach(s => console.log(`${s.name} ${s.degreeId} ${s.classId}`));

Example:

let 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
},
{
    "id":6,
    "ra":192837,
    "name":"Ester Faria de Cassio",
    "degreeId":5,
    "classId":2
} ]`;

let students = JSON.parse(json);

students.forEach(s => console.log(`${s.name} ${s.degreeId} ${s.classId}`));

Edit

If I understood correctly in relation to html wants several <input>, 3 for each student.

You could then do so:

let 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
},
{
    "id":6,
    "ra":192837,
    "name":"Ester Faria de Cassio",
    "degreeId":5,
    "classId":2
} ]`;

let students = JSON.parse(json);
const formAlunos = document.querySelector(".col.l12.s12");
const divRow = formAlunos.querySelector(".row");

students.forEach(s => {
  let novo = divRow.cloneNode(true); //criar uma nova linha para o aluno
  let inputs = novo.querySelectorAll("input"); //buscar os inputs

  //atribuir os valores
  inputs[0].value = s.name;
  inputs[1].value = s.degreeId;
  inputs[2].value = s.classId;
  
  formAlunos.appendChild(novo); //adicionar a nova linha ao form
});

formAlunos.removeChild(divRow); //remover a primeira vazia

<div class="container">
  <form class="col l12 s12">
    <div class="row">
      <div class="input-field col l6 s7">
        <input placeholder="Aluno" id="aluno" type="text" class="validate">
        <label for="aluno"></label>
      </div>
      <div class="input-field col l3 s2">
        <input placeholder="Série" id="serie" type="text" class="center validate">
        <label for="serie"></label>
      </div>
      <div class="input-field col l3 s2">
        <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">
    <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>