JSON descomplicado: utilizando o JSON Editor Online
O uso do formato JSON (sigla do inglês “JavaScript Object Notation”) para a representação de dados vem crescendo consideravelmente nos últimos anos, com o mesmo ocupando espaço em cenários nos quais antes reinava o padrão XML. A utilização constante de JSON em serviços REST, frameworks JavaScript e até mesmo no ASP.NET Core 1.0 (antes chamado de ASP.NET 5) constitui um bom exemplo desta nova realidade.
Tal popularidade se deve, sem sombra de dúvidas, à simplicidade deste formato. Também contribui o fato do padrão JSON ser mais enxuto, o que resulta em menores volumes de informações trafegando ao longo de uma rede.
Do ponto de vista estrutural, a representação de um elemento em JSON é formada por pares de informações; cada um destes pares possui um identificador (uma string que define o nome de um campo/propriedade), assim como um valor associado. Dentre os formatos de dados suportados por JSON estão os seguintes tipos: Numeric, String (texto iniciado e finalizado por aspas duplas), Boolean (true ou false), Array (os diversos elementos devem estar separados por vírgula e constando dentro de colchetes), Object (diferentes pares de informações dentro de um conjunto de chaves) e null.
No que se refere à codificação de strings em JSON, é extremamente comum que desenvolvedores montem manualmente sequências de texto neste padrão. Por mais que isto não seja um grande empecilho na maioria dos casos, há situações mais complexas em que o uso de uma ferramenta auxiliar pode simplificar bastante este tipo de tarefa. Uma boa solução neste sentido é o JSON Editor Online, alternativa gratuita e acessível através do seguinte endereço:
Contando com mecanismos para visualização e formatação de strings, o JSON Editor Online (Imagem 1) possui ainda funcionalidades que simplificam a edição de conteúdo gerado no padrão JSON.
Imagem 1. Interface do JSON Editor Online
Utilizando o JSON Editor Online
Para os exemplos descritos neste artigo será utilizada a string JSON detalhada na Listagem 1.
[code language=”html”]
{ “pais” : “Brasil”, “codTelefonico” : 55,
“cidades” : [ { “cidade” : “Belo Horizonte”, “estado”: “MG”, “ddd”: 31 },
{ “cidade” : “Porto_Alegre”, “estado”: “RS”, “ddd”: 51 } ] }
[/code]
Listagem 1: Exemplo de uma string em JSON
Como próximo passo agora será copiada a string de exemplo para o espaço de edição no JSON Editor Online (Imagem 2); ajustes podem ser efetuados neste local sem maiores restrições.
Imagem 2. String de exemplo na área de edição do JSON Editor Online
Uma das opções oferecidas pelo JSON Editor Online é a identação de uma string, ao acionar o botão que está destacado em vermelho na Imagem 3.
Imagem 3. String identada no JSON Editor Online
O resultado desta ação pode ser observado na Listagem 2.
[code language=”html”]
{
“pais”: “Brasil”,
“codTelefonico”: 55,
“cidades”: [
{
“cidade”: “Belo Horizonte”,
“estado”: “MG”,
“ddd”: 31
},
{
“cidade”: “Porto_Alegre”,
“estado”: “RS”,
“ddd”: 51
}
]
}
[/code]
Listagem 2: String JSON identada
É possível ainda se proceder com a “compactação” de tal string, com a remoção de espaços entre os diferentes elementos que formam a mesma. Para que isto aconteça deve-se acionar o botão indicado na Imagem 4.
Imagem 4. String compactada no JSON Editor Online
Na Listagem 3 está a string gerada após este procedimento de compactação.
[code language=”html”]
{“pais”:”Brasil”,”codTelefonico”:55,”cidades”:[{“cidade”:”Belo Horizonte”,”estado”:”MG”,”ddd”:31},{“cidade”:”Porto_Alegre”,”estado”:”RS”,”ddd”:51}]}
[/code]
Listagem 3: String JSON identada
Há também no JSON Editor Online uma segunda área para a edição de texto, com os diferentes elementos que constituem uma string organizados de forma hierárquica. Para utilizar tal funcionalidade acionar o botão destacado na Imagem 5.
Imagem 5. Dados organizados de forma hierárquica
Um duplo clique sobre um item possibilitará que o mesmo entre em modo de edição (Imagem 6); o objetivo com esta ação é remover o caractere “_” da identificação da cidade de Porto Alegre.
Imagem 6. Editando um item de uma string JSON
Ao lado de cada item da segunda área de edição há um pequeno ícone; trata-se um menu com opções para a inclusão, duplicação, remoção e até ordenação de elementos que formam uma string JSON (Imagem 7).
Imagem 7. Menu de atalho para a manipulação de itens
Ao acionar a opção “Append” no menu de atalho e, em seguida, “Object” um novo item será incluído ao final dos dados da cidade de Porto Alegre (Imagem 8).
Imagem 8. Adicionando um novo objeto ao conteúdo da string JSON
Cada uma das propriedades deste novo objeto será uma string formada por uma chave e um valor correspondente. A inclusão do primeiro destes elementos será feita via menu de atalho, selecionando a opção “Append” e na sequência “String” (Imagem 9); repetir então este processo para cada informação a ser adicionada.
Imagem 9. Preenchendo os elementos de um objeto JSON
Na Imagem 10 é possível observar o novo objeto incluído à string JSON, com o mesmo contendo dados referentes à cidade de São Paulo.
Imagem 10. Objeto JSON adicionado à string inicial
Para gerar uma nova string JSON que contemple os ajustes realizados anteriormente acionar o botão em destaque na Imagem 11. O espaço de edição que está do lado esquerdo será preenchido com o valor correspondente.
Imagem 11. Gerando a string JSON já com as mudanças realizadas
Na Listagem 4 está a string contendo todos os ajustes realizados.
[code language=”html”]
{
“pais”: “Brasil”,
“codTelefonico”: 55,
“cidades”: [
{
“cidade”: “Belo Horizonte”,
“estado”: “MG”,
“ddd”: 31
},
{
“cidade”: “Porto Alegre”,
“estado”: “RS”,
“ddd”: 51
},
{
“cidade”: “São Paulo”,
“estado”: “SP”,
“ddd”: 11
}
]
}
[/code]
Listagem 4: String JSON após as mudanças
Por fim, é importante destacar que o JSON Editor Online também emite alertas para strings que não representem um valor JSON válido. É o que demonstra o exemplo da Imagem 12.
Imagem 12. Informando uma string JSON inválida
Conclusão
Embora simples e intuitivo, o exemplo prático mostrou que o JSON Editor Online é uma excelente alternativa para a manipulação de strings JSON. O site desta ferramenta é suportado por diversos browsers (Microsoft Edge, Internet Explorer 8+, Chrome, Firefox, Safari, Opera), característica esta que contribui para que a mesma venha a ser utilizada por desenvolvedores nas mais variadas plataformas.
Espero que este post tenha sido útil.
Até uma próxima oportunidade!
Referências
JSON — Site oficial
http://www.json.org/
