Início /Programação /JavaScript /Como ler e obter dados de um arquivo JSON em JavaScript

Como ler e obter dados de um arquivo JSON em JavaScript

Por: Angelo Luis Ferreira | 20/10/2020 Acessos: 77.628

Neste tutorial mostraremos como ler e obter informações de um arquivo JSON ( "Javascript Object Notation") em JavaScript. Ao recebermos dados JSON de um servidor web, esse dados serão sempre uma string. Através do método JSON.parse() podemos converter essa string em um objeto JavaScript e assim acessar todo o seu conteúdo.

Obs1: Ler dados de um arquivo JSON é muito útil para obtermos dados externos em tempo real. Quando utilizamos a tecnologia AJAX, podemos obter dados de arquivos JSON sem a necessidade da atualizar a página, o que torna o site mais rápido e interativo.

Obs2: Muitas plataformas web utilizam JSON em suas API's (Application Programming Interface), o que facilita a muito a comunicação e o acesso à informações destes sites.

Atenção: Em função da política da mesma origem, esse método não permite a transferência de dados entre domínios diferentes.

O que é JSON?

  • JSON (JavaScript Object Notation) é um modelo para armazenamento e transmissão de informações estruturadas no formato texto.
  • O arquivo JSON é uma alternativa simplificada do XML (Extensive Markup Language).
  • O JSON é utilizado principalmente para transferir dados entre um servidor e um cliente.
  • O processo de requisição Ajax (Asynchronous JavaScript and XML) com JSON é mais fácil do que o XML/RSS, e por isso o JSON atualmente vem se tornando muito popular.

Para saber mais sobre codificação JSON e uso do JSON em JavaScript, veja os artigos:

- O Que É JSON?

- O mínimo que você precisa saber sobre JSON para ser um bom programador!

- JSON Tutorial

1. Analisando dados JSON

1.1. Como já mencionamos, os dados recebidos de um arquivo JSON são sempre strings. Imagine que recebemos os seguintes dados de um servidor web:

'{"nome":"Angelo", "idade":86, "cidade":"São Paulo", "estado":"SP"}'

1.2. Usando a função JSON.parse() podemos converter a string em um objeto JavaScript:

var cliente = JSON.parse('{"nome":"Angelo", "idade":86, "cidade":"São Paulo", "estado":"SP"}')

1.3. Veja no exemplo a seguir que após convertemos a string em objeto podemos manipular os dados para obter qualquer parte das informações recebidas:

See the Pen Ler Jason JS 01 by Angelo Luis Ferreira (@angeloalf) on CodePen.

2. Obtendo JSON de um servidor web (Requisição Ajax)

2.1. Neste exemplo vamos mostrar o processo completo de uma requisição Ajax de um arquivo JSON. Primeiro vamos criar o arquivo JSON abaixo e adicioná-lo em nosso servidor web onde o nosso site está hospedado.

2.1.1. Objetos com datas não são aceitos em JavaScript. Portanto, para incluir uma data em um arquivo JSON, escreva-a como uma string. Depois, utilizando JavaScript, você poderá convertê-la em uma data realmente.

JSON (arquivo cliente.json)

{
    "clientId": 1,
    "cadastro": "2016-12-14",
    "nome":"Angelo",
    "idade":86,
    "cidade":"São Paulo",
    "estado": "SP",	
    "pets":[
        { "animal":"cachorro", "nome":"Fido" },
        { "animal":"gato", "nome":"Felix" },
        { "animal":"hamster", "nome":"luzinha" }
    ]
}

2.2. O arquivo JSON foi criado e hospedado. Para visualizá-lo acesse o link: http://www.visualdicas.com.br/exemplos/json/cliente.json

2.2.1. Arquivos JSON devem utilizar preferencialmente a extensão .json, mas podem utilizar outras extensões também, como a extensão .txt por exemplo. Dica: Você poderá fazer o teste alterando a extensão de .json para .txt.

2.2.2. De acordo com política da mesma origem, podemos transferir dados apenas entre arquivos hospedados no mesmo domínio. Para transferência de dados entre domínios diferentes é necessário a utilização de algum complemento, como o JSON-P por exemplo.

2.3. Agora que já temos o arquivo JSON armazenado no servidor web, podemos escrever o programa para acessar esse conteúdo. Para isso, criamos um novo arquivo denominado  teste.html que vai pegar os dados do JSON e exiibí-los da forma que desejarmos.

HTML

<body>
<h1>Ler e obter dados um arquivo JSON</h1>
<h2>Uso do XMLHttpRequest para obter o conteúdo de um arquivo - Requisição AJAX.</h2>
<p>O conteúdo está escrito no formato JSON, e pode facilmente ser convertido em um objeto JavaScript.</p>
<p>Para converter o conteúdo JSON em um objeto JavaScript utilize o método JSON.parse().</p>
<hr/>

<p id="demo"></p>

<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var cliente = JSON.parse(this.responseText);    
    document.getElementById("demo").innerHTML = `
        <h3>Dados do Cliente</h3>
        <p>Cadastro: ${new Date(cliente.cadastro)}</p>    
        <p>Nome: ${cliente.nome}</p> 
        <p>Idade: ${cliente['idade']} anos</p>
        <p>Cidade: ${cliente.cidade} - ${cliente.estado}</p>
        <h4>Pets</h4>    
        <table>
            <tr>
                <th>Animal</th>
                <th>Nome do Pet</th>
            </tr>
            <tr>
                <td>${cliente.pets[0]['animal']}</td>
                <td>${cliente.pets[0]['nome']}</td>
            </tr> 
            <tr>
                <td>${cliente.pets[1].animal}</td>
                <td>${cliente.pets[1].nome}</td>
            </tr>
            <tr>
                <td>${cliente.pets[2].animal}</td>
                <td>${cliente.pets[2].nome}</td>
            </tr>
        </table>
        <br/>    
        <hr/>   
`
  }
};

xmlhttp.open("POST", "cliente.json", true);
xmlhttp.send();
</script>

<p>Acesse o arquivo JSON <a href="/cliente.json" target="_blank">cliente.json</a></p>

</body>
</html>

 2.4. Para um melhor entendimento, clique acesse o link do arquivo text.html:exemplo Visual Dicas

2.4.1. Veja a figura abaixo que mostra o resultado do arquivo teste.html:

2.5. Entendendo o código:

2.5.1. Veja abaixo o modelo padrão que usamos para fazer a requisição AJAX com JavaScript puro e obter o conteúdo de um arquivo JSON:

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("POST", "json_demo.txt", true);
xmlhttp.send();

2.5.1.1. Não vamos entrar em detalhes sobre o código acima, pois não é o objetivo deste tutorial. Entretanto, é importante saber que:

a) Criamos o objeto xmlhttp a partir da classe XLMHttpRequest. Este objeto é responsável pela troca de dados entre páginas armazenadas em um servidor web. Isto é muito útil, pois podemos obter conteúdo de várias páginas em tempo real e atualizar partes de uma página web sem precisar carregar a página inteira.

b) Usando readyState é igual a 4 e  status é igual a 200, a condição somente será verdadeira se a comunicação foi concluída e está pronta para a transferência de dados.

c) Observe que usamos o método JSON.parse() pra converter o conteúdo JSON um objeto JavaScritp, cujo o parâmetro é o atributo responseText, responsável por retornar a requisição no formato de string.

d) O método open() especifica o tipo de requisição, ou seja, o método se GET ou POST, o endereço do arquivo JSON e se a conexão é true (asynchronous) ou false (synchronous).

Obs.: Você poderá usar o método GET ou POST:

. GET é mais simples e rápido que POST e pode ser utilizado na maioria dos casos;

. POST deve ser escolhido quando a quantidade de dados é muito grande (POST não tem limitação de tamanho) e quando existe a necessidade de maior segurança. Portanto, POST é mais robusto e mais seguro do que GET.

e) Finalmente usamos o método send() que envia a requisição para o servidor, criando a magia da transferência de conteúdo entre arquivos.

f) Observe que ao utilizarmos o modelo JSON de dados, somente poderemos transferir dados entre arquivos constantes no mesmo domínio, ou seja, tanto o arquivo cliente.json como o arquivo teste.html estão armazenados no mesmo domínio www.visualdicas.com.br.

2.5.2. Observe no código abaixo que usamos o template string para exibir os dados na div "demo". Leia: Manipulando strings com Templates Strings, o pulo do gato do JavaScript moderno.

2.5.3. Também usamos o método Date() para criarmos uma data real a partir de uma string. Você poderá alterar o formato da data como mostramos no tutorial Usando datas com o objeto Date() do JavaScript.

<p>Cadastro: ${new Date(cliente.cadastro)}</p>

2.5.4. Para se obter um valor em um objeto JavaScript, utilizamos o formato objeto.chave e objeto['chave']. Ambas as formas são válidas para obtermos o valor de uma chave em um objeto JavaScript:

<p>Nome: ${cliente.nome}</p> 
<p>Idade: ${cliente['idade']} anos</p>
 2.6. Dica: Podemos melhorar o script do arquivo teste.html para fazer a leitura dos pets independente da quantidade de itens. Usando a estrutura for(let i in array), varremos todos os itens do array para obter todos os itens encontrados. Veja o exemplo abaixo:

<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var cliente = JSON.parse(this.responseText); 
    document.getElementById("demo").innerHTML = `
        <h3>Dados do Cliente</h3>
        <p>Cadastro: ${new Date(cliente.cadastro)}</p>    
        <p>Nome: ${cliente.nome}</p> 
        <p>Idade: ${cliente['idade']} anos</p>
        <p>Cidade: ${cliente.cidade} - ${cliente.estado}</p>
        <h4>Pets</h4>    
        <table>
            <tr>
                <th>Animal</th>
                <th>Nome do Pet</th>
            </tr>
            ${pegarPets()}
        </table>
        <br/>    
        <hr/>   
    `  
    function pegarPets() { 
        let petArray = cliente.pets;
        let textTable = "";
        for(let i in petArray) {
                textTable += `
                    <tr>  
                        <td>${petArray[i]['animal']}</td>
                        <td>${petArray[i]['nome']}</td> 
                    </tr>
           `                           
        }         
        return textTable;
   }
  }
};

Documentação Oficial

1. [JASON.parse() ] » Sobre o método JASON.parse() - MDN

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários

×

Infomações do site / SEO