# JSON: JavaScript Object Notation

> JSON: JavaScript Object Notation completamente explicado. Formato de dados essencial para APIs, comunicação cliente-servidor e armazenamento. Domine!

URL: https://dpw.dev/javascript/json-javascript-object-notation/  
Publicado em: 2011-06-22  
Categoria: javascript  
Tags: analise  
Autor: Tárcio Zemel

Já não é nenhuma novidade no mundo de [desenvolvimento web](/ "desenvolvimento para web") o uso e abuso da tecnologia **JSON**. Entretanto, nem todos conhecem este padrão de intercâmbio facilitado de dados entre aplicações. Não é obrigatório, mas saber JSON pode ser bastante útil em projetos um pouco mais sofisticados e/ou que necessitam de uma demanda/política de transferência de dados mais simples, leve e eficiente.

Usar JSON proporciona inúmeras vantagens ao desenvolvedor web. Desde a simplicidade em tratar os dados à maneira fácil como é possível integrar tecnologias _client-side_ com _server-side_, o JSON certamente é bastante recomendado.

## O que é e para que serve JSON

JSON é o acrônimo para "**JavaScript  Object  Notation**". Como é possível notar pelo nome, originalmente o JSON foi concebido para se trabalhar com javascript, mas, já adiantando, não é necessariamente obrigatório o uso de javascript para seu uso, dado que, atualmente, é possível utilizar JSON com mais de 20 linguagens de programação diferentes.

Uma definição interessante é a do Wikiédia:

> JSON (com a pronuncia djeisón), um acrônimo para "JavaScript Object Notation", é um formato leve para intercâmbio de dados computacionais. JSON é um subconjunto da notação de objeto de JavaScript, mas seu uso não requer javascript, exclusivamente.
>
> O formato JSON foi originalmente criado por Douglas Crockford e é descrito no [RFC 4627](http://tools.ietf.org/html/rfc4627). O media-type oficial do JSON é _application/json_ e a extensão é _.json_.

Mas uma definição que explica, de forma bem mais simples e objetiva, é a de [Tiago Belem](http://blog.thiagobelem.net/), em seu artigo "[Introdução a JSON e PHP](http://blog.thiagobelem.net/php/introducao-a-json-e-php-webservices/)", no qual consta que

> JSON é um padrão de formatação de dados que serão transmitidos entre duas aplicações de linguagens diferentes.

Quer dizer, JSON é usado, principalmente, para **permitir a troca de dados entre linguagens**. Mas não só isso, ele também é ótimo para lidar com _webservices_ e tem muitos outros usos.

## Vantagens em se usar JSON

A descrição de dados em JSON é bem fácil, não passando de um documento de texto puro disposto em um padrão simples. Conforme foi explicado, JSON é excelente para intercâmbio de informações entre aplicativos.

Mas também existem outras maneiras de se fazer isso, por exemplo, com **XML**. Entretanto, o JSON apresenta vantagens bastante interessantes, o que, após uma análise do caso de seu aplicativo ou sistema web, pode levá-lo a optar por ele. Algumas das vantagens são:

- Sintaxe simples, de fácil aprendizado e implementação;
- Tamanho do arquivo bem menor em relação a outras "linguagens intermediárias", tais como XML;
- Facilidade de desenvolvimento e alto desempenho nas aplicações que o utilizam.

## Estruturas JSON

É possível ver alguns diagramas das estruturas no próprio [site oficial do JSON](http://www.json.org/); basicamente, é o seguinte:

![JSON: estruturas](/images/blog/json-javascript-object-notation/json-estruturas-objeto-array-valor.gif)

Vamos ver, então, como podemos descrever dados simples usando o que a sintaxe que ele nos oferece.

### Arrays

Por exemplo, vamos ver como seria um array dos dias da semana:

```json
["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"]

```

Perceba que strings devem ser indicadas com aspas duplas.

Elementos separados por vírgulas entre colchetes é a notação JSON para um array (naturalmente, a vírgula delimita cada item). A maioria dos desenvolvedores prefere identar um pouco o código para facilitar a leitura:

```json
[
	"Domingo",
	"Segunda",
	"Terça",
	"Quarta",
	"Quinta",
	"Sexta",
	"Sábado"
]

```

É possível, também, misturar diversos tipos de dados em um só array:

```json
[
	33,
	"Segunda",
	TRUE,
	3.14159265,
        NULL,
        "maçã"
]

```

### Objetos

Como vimos, arrays são representados por colchetes. No caso de objetos, estes são representados por chaves; cada chave é identificada por uma string e, depois de um dois-pontos, os valores de cada item especificados. Fica mais claro com um exemplo:

```json
{
	"Domingo" : "Folga",
	"Segunda" : "Viagem",
	"Terça"   : "Pagamentos",
	"Quarta"  : "Piscina",
	"Quinta"  : "Churrasco",
	"Sexta"   : "Carteado",
	"Sábado"  : "Festa"
}

```

Perceba que não tem importância haver espaços a mais ou a menos entre a descrição da chave, o separador ":" e o valor desta. Tudo será interpretado corretamente.

### Alguns exemplos

É bastante simples descrever JSON, você viu. Como os objetos de qualquer outra linguagem de programação, é possível armazenar quaisquer tipos de dados e quantos dados se desejar. Veja este exemplo:

```json
{
    "Marconildo":
    {
        "url": "http://www.marconildo.com.br/",
        "idade": 34
    },
    "Joanorta":
    {
        "url": "http://www.joanorta.com.br/",
        "idade": 22
    },
    "Estripafurgia":
    {
        "url": "http://www.estripafurgia.com.br/",
        "idade": 47
    }
}

```

Perceba que, neste caso, cada objeto possui, "url" e "idade" (provavelmente este não seria um exemplo "da vida real", mas dá para ilustrar bem o conceito), mas, não necessariamente, todos devem possuir o mesmo número de propriedades. Poderia haver um ou mais elementos com "url", "idade", "altura", "endereco", etc. É possível, inclusive, a utilização de arrays:

```json
{
    "Marconildo":
    {
        "url": "http://www.marconildo.com.br/",
        "idade": 34
    },
    "Joanorta":
    {
        "url": "http://www.joanorta.com.br/",
        "idade": 22
    },
    "Estripafurgia":
    {
        "url": "http://www.estripafurgia.com.br/",
        "idade": 47,
    	"diasDeTrabalho":
	 [
	     "Segunda",
	     "Quarta",
	     "Sexta"
	 ]
    }
}

```

E, até, um array de objetos!

```json
{
    "Marconildo":
    {
        "url": "http://www.marconildo.com.br/",
        "idade": 34
    },
    "Joanorta":
    {
        "url": "http://www.joanorta.com.br/",
        "idade": 22
    },
    "Estripafurgia":
    {
        "url": "http://www.estripafurgia.com.br/",
        "idade": 47,
    	"dependentes":
    	[
    	    "Astolfinho":
	    {
	        "sexo" : "m",
	        "idade": 16
	    },
    	    "Mariazinha":
	    {
	        "sexo" : "f",
	        "idade": 10
	    }
    	]
    }
}

```

## JSON e javascript

Agora você já aprendeu as notações básicas do JSON, mas o que fazer com isso, como usar, efetivamente, o poder do JSON nas aplicações do dia-a-dia usando javascript? Veja um exemplo simples:

```javascript
var funcionarios = '
	{
	    "Marconildo":
	    {
	        "url": "http://www.marconildo.com.br/",
	        "idade": 34
	    },
	    "Joanorta":
	    {
	        "url": "http://www.joanorta.com.br/",
	        "idade": 22
	    },
	    "Estripafurgia":
	    {
	        "url": "http://www.estripafurgia.com.br/",
	        "idade": 47
	    }
	}
';

var funcionario = JSON.parse(funcionarios);

alert(funcionario.Marconildo);
alert(funcionario.Marconildo.idade);

```

Foi criada a variável "funcionarios" e colocado uma string JSON nela. Usando a função [JSON.parse](http://msdn.microsoft.com/en-us/library/cc836466\(v=vs.94\).aspx), convertemos a string para, efetivamente, JSON na variável "funcionario"e, a partir daí, foi possível acessar todas suas propriedades com a notação padrão de OO.

Esse foi um exemplo ilustrativo. Em aplicações "de verdade", seria bastante eficiente, por exemplo, realizar requisições em AJAX para procurar retornos em JSON e, a partir daí, realizar quaisquer tipos de operação com o _data_ retornado. Trataremos disso em artigos futuros. [Assine o feed](/feed) para conferir.

### $.getJSON

O jQuery possui uma poderosa ferramenta para trabalharmos com JSON, é a função [$.getJSON](http://api.jquery.com/jQuery.getJSON/), que serve para carregar dados no formato JSON usando requisição HTTP **GET**. Na verdade, esta função é somente uma espécie de atalho para [$.ajax()](http://api.jquery.com/jQuery.ajax/) usando "json" no dataType, mas usá-la num contexto JSON fica bastante coerente.

Não há mistério algum para usar, ele segue a mesma "linha" do $.ajax(), como podemos encontrar neste exemplo disponibilizado no próprio site do jQuery:

```javascript
$.getJSON('ajax/test.json', function(data) {
  var items = [];

  $.each(data, function(key, val) {
    items.push('' + val + '');
  });

  $('', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

```

E, [como nos mostra Gabriele Romanato](http://onwebdev.blogspot.com/2011/08/jquery-testing-remote-json-data-with.html), é possível verificar se o resultado da requisição é realmente um objeto JSON de maneira simples:

```javascript
$.getJSON(url, function(data)) {
  if(typeof data !== 'object') {
    // Erro!
  }
});

```

Dessa maneira, é possível economizar bastante tempo ao procurar erros e a estrutura de código fica mais profissional e mais facilmente manutenível.

## JSON e PHP

O PHP também possui algumas [funções para se trabalhar com JSON](http://www.php.net/manual/en/ref.json.php). Vamos a um exemplo simples de como gerar PHP a partir de JSON:

```
$funcionarios = '
	{
	    "Marconildo":
	    {
	        "url": "http://www.marconildo.com.br/",
	        "idade": 34
	    },
	    "Joanorta":
	    {
	        "url": "http://www.joanorta.com.br/",
	        "idade": 22
	    },
	    "Estripafurgia":
	    {
	        "url": "http://www.estripafurgia.com.br/",
	        "idade": 47
	    }
	}
';

$funcionario = json_decode($funcionarios);

echo $funcionario->Marconildo . '';
echo $funcionario->Marconildo->idade;

```

Bem simples, bem direto, dispensa explicações. Agora, se você preferir tratar o JSON como se fosse array, basta inserir um segundo parâmetro à função, dessa maneira:

```
$funcionario = json_decode($funcionarios, TRUE);

```

## Ferramentas JSON

JSON é bastante simples e intuitivo para qualquer programador, mas, para quem está começando a mexer agora e/ou para os que precisam de algumas **ferramentas para JSON**, segue o link de alguns parser, validadores e ferramentas, em geral, para se trabalhar com JSON:

- [Json Parser Online](http://json.parser.online.fr/)
- [JSONLint - The JSON Validator](http://jsonlint.com/)
- [Online JSON Viewer](http://jsonviewer.stack.hu/)
- [Convert JSON Strings to a Friendly Readable Format](http://www.jollydroll.com/tools/json)
- [JSON Generator](http://www.json-generator.com/)

## Conclusão sobre JSON

Uma das principais funcionalidades do JSON é o **intercâmbio de dados entre aplicativos e linguagens diferentes**. Sua sintaxe simples, sua leveza e objetividade, aliados ao suporte por dezenas de linguagens de progrmação o tornam uma excelente alternativa quando a necessidade é esta. O fato de milhares de _webservices_ de qualidade usarem JSON deve ser um bom indicativo de que usá-lo é uma boa escolha.

Usando as ferramentas apresentas, é possível validar seu JSON, testá-lo, verificar se está produzindo uma hierarquia correta, enfim, aperfeiçoar e refinar o código para que atinja o máximo possível de desempenho. Ao se trabalhar com JSON, logo se percebe seu poder e simplicidade, o que agiliza bastante o processo de programação, ao mesmo tempo em que o formato não se torna um empecilho à produtividade; pelo contrário, a aprimora!

Por essas e outras a notação **JavaScript Object Notation**, mais conhecida como **JSON**, é altamente recomendada para desenvolvimento web!

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml