How to repeat Json data in a list

Navigation
0

How to list all students (name), the series (degreeId) and classes (classId) of 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();
    }

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

Image of the screen to load the inputs

    
asked by anonymous 10.08.2017 / 20:12

1 answer

1

You only need to parse once, and in your case was doing it several times. As a list of students you get you can use forEach to go through all and show the corresponding fields of each student like this: 

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

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 correctly understood the html wants several <input> , 3 for each student.

I could then do this: 

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>
    
10.08.2017 / 20:27
OnChange does not load in jquery? Doubt about NgFor