Quero ler e apresentar num console.log as informações que estão dentro do meu .JSON, mas sem o uso de jquery ou outras frameworks. Código básico.
2 Respostas
A leitura de um arquivo do disco é assíncrona, por isto, é necessário informar um função de callback.
function lerArquivo(arquivo, callback) {
var rawFile = new XMLHttpRequest();
rawFile.overrideMimeType("application/json");
rawFile.open("GET", arquivo, true);
rawFile.onreadystatechange = function() {
if (rawFile.readyState === 4 && rawFile.status == "200") {
callback(rawFile.responseText);
}
}
rawFile.send(null);
}
Modo de Utilização
lerArquivo("caminho-do-arquivo-aqui", function(texto){
var dado = JSON.parse(texto);
console.log(dado);
});
Além do exemplo básico você tem que se preocupar com o cache do arquivo (pela sua pergunta, reconheço que seja um arquivo), lembrando que deve estar sendo hospedado (o navegador não permite requisições nos locais do dispositivo). Se quiser evitar cache recomendo requisicionar um arquivo pré-processado pelo servidor (por exemplo, PHP), para definir um cabeçalho de resposta que acaba com o tempo de duração do cache do arquivo (há vários exemplos fáceis de achar), ou em outra ocasião, você pode versionalizar a URL de requisição (em várias maneiras).
Lembrando que é também é importante saber a codificação usada no arquivo, para obter seus caracteres do Unicode esperados. Aqui há alguns exemplos de como definí-la (request.setRequestHeader('Content-Type', 'application/x-javascript; charset:Codificação')
).
A resposta do @LucasKauer também vai funcionar para interpretar o JSON, mas atualmente ele não está pegando o resultado da interpretação (rawFile.responseText
retorna o conteúdo do arquivo, mas rawFile.response
devolve o conteúdo interpretado automaticamente pelo navegador).
Também é possível minimizar callbacks de requisições assíncronas usando funções geradoras do ES6 (pelo que eu saiba há algo similiar no ECMAScript 5, usando a própria API da linguagem).
// Requisição assíncrona
var request = new XMLHttpRequest;
request.open('GET', 'file.json', true);
function onReadyStateChange () {
if (request.readyState === 4 && request.status === 200) {
console.log(JSON.parse(request.responseText));
}
}
request.addEventListener('readystatechange', onReadyStateChange);
request.send();
-
1Obrigado, cara. Consegui fazer algo bem parecido! Ajudou bastante!– G. RamosCommented 11/02/2017 às 20:54