0

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
  • Onde está esse Json? No servidor? Externo? Tem algum código para nos mostrar o que você anda tentando?
    – Asura Khan
    Commented 10/02/2017 às 20:24
  • De uma olhada aqui: w3schools.com/xml/xml_http.asp
    – Giovane
    Commented 10/02/2017 às 20:29

2 Respostas 2

1

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);
});
0
1

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();
1
  • 1
    Obrigado, cara. Consegui fazer algo bem parecido! Ajudou bastante!
    – G. Ramos
    Commented 11/02/2017 às 20:54

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