O que é JSON, como e quando utilizar?

JSON (JavaScript Object Notation) é uma estrutura de dados em javascript.
Apesar de começarem a falar muito disso recentemente, JSON não é uma tecnologia nova, faz parte do javascript puro e não precisa de nenhum script pra trabalhar.

O JSON pode substituír o XML, e faz isso muito bem na hora de trabalhar com respostas em AJAX.
A estrutura de dados fica mais simples de trabalhar e o tempo de execução de um script lendo dados em JSON é dezenas de vezes mais rápido do que ler um conteúdo XML.

As principais linguagens de programação server side tem suporte pra escrever dados em JSON.

Veja o exemplo da estrutura de dados abaixo

var dados = {
	"aluno" : [
		{"nome":"João", "provas":  [ { "nota":8 }, {"nota":6}, {"nota":10 }, {"nota":2 } ] },
		{"nome":"Maria", "provas": [ { "nota":3}, {"nota":5}, {"nota":8 }, {"nota":1 } ] },
		{"nome":"Pedro", "provas": [ { "nota":7}, {"nota":6}, {"nota":6 }, {"nota":8 } ] },
	]
};

Veja como seria a mesma estrutura de dados em XML:

<?xml version='1.0' encoding='utf-8'?>
<aluno>
	<nome>Danilo</nome>
	<provas>
		<prova nota=8/>
		<prova nota=6/>
		<prova nota=10/>
		<prova nota=2/>
	</provas>
</aluno>
<aluno>
	<nome>Belinha</nome>
	<provas>
		<prova nota=3/>
		<prova nota=5/>
		<prova nota=8/>
		<prova nota=1/>
	</provas>
</aluno>
<aluno>
	<nome>Carla</nome>
	<provas>
		<prova nota=7/>
		<prova nota=6/>
		<prova nota=6/>
		<prova nota=8/>
	</provas>
</aluno>

Apesar do xml ter mais chaves e colchetes, fica mais facil de ler os dados:

var jsonData = eval(dados);

E pronto, bem mais simples que xml!

Depois para obter os dados funciona assim:

document.write(jsonData.aluno[0].nome);
// Escreve o nome do primeiro aluno: "Danilo";

document.write(jsonData.aluno[1].provas.nota[3]);
// Escreve a nota da última prova da Belinha ;

document.write(jsonData.aluno[2].provas.nota[0]);
// Escreve a nota da primeira prova da Carla ;

for(i=0;i<jsonData.aluno.length;i++){
	document.write(jsonData.aluno[i].nome);
}
// escreve o nome de todos os alunos

for(i=0;i<jsonData.aluno.length;i++){
	document.write(jsonData.aluno[i].nome);
	for(j=0;j<jsonData.aluno[i].provas.length;j++){
		document.write(jsonData.aluno[i].provas[j].nota);
	}
}
// escreve o nome e todas as notas de todos os alunos

No site JSON.org pode encontrar mais informações, em português.

Você pode se interessar também por:

7 Responses to “O que é JSON, como e quando utilizar?”

1
O Bug do parse XML no IE com o ajax do jQuery | TidBits Says:
June 4th, 2009 at 1:13 am
[...] Solução número 1 – Pare de trabalhar com XML e comece a usar JSON. [...]
2
snyper128 Says:
June 28th, 2009 at 10:23 pm
Já tinha visto algo sobre JSON mas não imaginei que erra tão simples assim.
3
Thiago Couto Says:
July 30th, 2009 at 11:28 pm
Gosto de trabalhar com JSON por causa da velocidade se comparado ao parse do XML.

Boa explicação, simples e direta.
4
Luis Felipe Corrêa Pérez Says:
January 29th, 2010 at 8:50 am
Bom dia.

Muito bom e útil o artigo. Quero informar que a linha “Apesar do xml ter mais chaves e colchetes, fica mais facil de ler os dados:” está errada. São os JSON que possuem mais chaves e colchetes.

Parabens! Até breve.
5
Márcio Says:
July 14th, 2010 at 7:31 am
Faltou data de quando foi postado!
6
Jair Humberto Says:
May 23rd, 2011 at 11:19 am
Como especifica a codificação em que está?
7
Fernando Says:
December 28th, 2011 at 5:11 pm
Nossa senhora, já tinha ouvido falar disso, eu tava me preocupando com XML e AJAX já numas página, fiquei sabendo desse JSON a pouco tempo, mas gostei muito desse eval().
Ao contrário de usar o DOM para explorar o XML, isso é muito chato, prefiro o eval() haahah
muito bom !

TidBits