1

Como fazer para carregar um arquivo Json no meu html. O console não demonstra nenhum erro, porém não é preenchido nenhum campo com os dados do arquivo Json.

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

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();
    }
2
  • Onde está o JSON? é um ficheiro ou vais buscar na internet? Podes colocar o código que já tens?
    – Sergio
    9/08/2017 às 20:14
  • @Sergio Em um arquivo no mesmo diretório do html.
    – LeAndrade
    9/08/2017 às 20:20

1 Resposta 1

0

Coloque os IDs com aspas e em tag input você deve colocar .value e não .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
   }
]
8
  • Certo cara só que agora está retornando undefined nos campos.
    – LeAndrade
    9/08/2017 às 20:50
  • @Leandro coloca o Json aqui, undefined é erro de como vc ta puxando a invormação do json. 10/08/2017 às 14:34
  • Adaptei o script para você ter um exemplo funcionando. 10/08/2017 às 14:40
  • [ { "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 } ]
    – LeAndrade
    10/08/2017 às 15:42
  • 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.name; document.getElementById("serie").value = degrees.degreeId; document.getElementById("classe").value = classes.classId; } }; xmlhttp.open("GET", "students.json", true); xmlhttp.send(); }
    – LeAndrade
    10/08/2017 às 15:43

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 .