0

Preciso ler um arquivo JSON por JavaScript e atribuir cada item dele numa só variável, como fiz neste algoritmo:

function leitura(){
   var arquivo = **Ler arquivo**('json/teste.json');
   var conteudo;
   **Laço de repetição**{
       conteudo += arquivo.nome + ', ';
   }
   alert(conteudo);
}
4
  • Possível duplicata de Ler e manipular dados de json usando jquery
    – user77310
    Commented 26/12/2017 às 11:43
  • Em todos os exemplos que vi em outras perguntas, utilizam a seguinte sintaxe "$.getJSON('ajax/test.json', function(data) {", mas como eu chamaria essa função? Eu só quero executar a função leitura do meu código.
    – user75204
    Commented 26/12/2017 às 11:46
  • Essa função é nativa do Jquery. Você utiliza jquery no seu projeto?
    – user77310
    Commented 26/12/2017 às 11:48
  • Não utilizo JQuery.
    – user75204
    Commented 26/12/2017 às 12:01

1 Resposta 1

1

Você vai precisar efetuar uma requisição para seu json, utilizando o objeto XMLHttpRequest dessa forma abaixo:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       var myObj = JSON.parse(this.responseText);
       document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();

Em seguida o objeto analisa o retorno da requisição feita pelo objeto XMLHttpRequest e verifica se o status httpd é válido (200) e transforma o retorno do arquivo (string) para um json utilizando a função do javascript JSON.parse, em seguida pode ler as entradas do json uma a uma para sua variavel como fez acima no seu exemplo.

Aprofunde seu conhecimento aqui : ler Json com javascript

Para executar quando a página carrega tem que usar um evento, dessa forma:

window.onload = function(){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {
           var myObj = JSON.parse(this.responseText);
           document.getElementById("demo").innerHTML = myObj.name;
       }
   };
   xmlhttp.open("GET", "json_demo.txt", true);
   xmlhttp.send();
}

window.onload serve para executar o código após o carregamento da página estar completo.

4
  • Eu não entendi como e quando executar esta função. Por exemplo, se quero executar quando a página carrega?
    – user75204
    Commented 26/12/2017 às 12:10
  • Primeiramente você tinha definido no seu html tag body: <body ... onload="load()"> no onload para chamar a função load mas ela não existe, o que acarreta erro na sua pagina, remova a chamada de sua função load(), porque demonstrei como efetuar isso via javascrip com window.onload. Segundo você faz um GET para xmlhttp.open("GET", "json/teste.json", true); mas o arquivo não está no servidor responde 404.
    – user77310
    Commented 26/12/2017 às 12:29
  • Ops... é mesmo. Corrigi estes erros, mas continua a não funcionar.
    – user75204
    Commented 26/12/2017 às 12:38
  • Seu json agora está com erro =P : VM523:2 Uncaught SyntaxError: Unexpected token { in JSON at position 2942. Abre o chrome e aperte F12 guia console e olha os erros que vão aparecendo.
    – user77310
    Commented 26/12/2017 às 12:41

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