1

Como listar todos os alunos(name), as séries(degreeId) e as classes(classId) deste arquivo 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
} ]

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

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

Imagem da tela para carregar nos inputs

inserir a descrição da imagem aqui

3
  • Podes dar um exemplo de como queres que o HTML resultante seja?
    – Sergio
    10/08/2017 às 18:53
  • Sergio editei minha pergunta e coloquei o Html. No caso aqui tem 3 inputs que recebem o nome do aluno, a série(deggreId) e a classe(classId). Um botão com a função para carregar os dados e um editar que ainda não funciona.
    – LeAndrade
    10/08/2017 às 19:08
  • E em cada input queres 1 nome, ou todos separados por virgulas?
    – Sergio
    10/08/2017 às 19:12

1 Resposta 1

2

Só é necessário fazer o parse uma vez, e no seu caso estava a fazer várias vezes. Como é uma lista de estudantes que obtém pode utilizar um forEach para percorrer todos e mostrar os campos correspondentes de cada estudante assim:

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

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

Ou se quiser utilizar arrow functions e template literals

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

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

Exemplo:

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

Se eu percebi corretamente em relação ao html quer vários <input>, 3 por cada aluno.

Poderia então fazer assim:

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>

9
  • Certo Isac funcionou no console, porém como faço os dados carregar nos inputs html.
    – LeAndrade
    10/08/2017 às 19:53
  • @Leandro Quando eu respondi não tinha de facto o html. O Objetivo é criar um <div class="row"> igual ao que está para cada estudante e adicionar ao <form> com os valores nos sítios certos ? Ou de que forma é que é suposto o html ficar depois dos dados serem carregados
    – Isac
    10/08/2017 às 20:17
  • Então Isac o Html está na pergunta ali em cima, embaixo do javascript, a ideia aqui é carregar os dados em três inputs, entendeu, tipo document.getElementById("aluno") e preenche o input com o dado do json entendeu.
    – LeAndrade
    10/08/2017 às 20:31
  • @Leandro Mas você tem 6 alunos no json. Carrega só o primeiro ? Ou como é que vai funcionar?
    – Isac
    10/08/2017 às 20:32
  • Carregar todos, um embaixo do outro. Tipo fazer um loop e carregar todos como funcionou no console só que nos inputs html.
    – LeAndrade
    10/08/2017 às 20:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .