json-arquivos-00

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:

http://www.jsoneditoronline.org/

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.

jsoneditor-01
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.

{ "pais" : "Brasil", "codTelefonico" : 55,
  "cidades" : [ { "cidade" : "Belo Horizonte", "estado": "MG", "ddd": 31 },
                { "cidade" : "Porto_Alegre", "estado": "RS", "ddd": 51 } ] }

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.

jsoneditor-02
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.

jsoneditor-03
Imagem 3. String identada no JSON Editor Online

O resultado desta ação pode ser observado na Listagem 2.

{
  "pais": "Brasil",
  "codTelefonico": 55,
  "cidades": [
    {
      "cidade": "Belo Horizonte",
      "estado": "MG",
      "ddd": 31
    },
    {
      "cidade": "Porto_Alegre",
      "estado": "RS",
      "ddd": 51
    }
  ]
}

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.

jsoneditor-04
Imagem 4. String compactada no JSON Editor Online

Na Listagem 3 está a string gerada após este procedimento de compactação.

{"pais":"Brasil","codTelefonico":55,"cidades":[{"cidade":"Belo Horizonte","estado":"MG","ddd":31},{"cidade":"Porto_Alegre","estado":"RS","ddd":51}]}

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.

jsoneditor-05
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.

jsoneditor-06
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).

jsoneditor-07
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).

jsoneditor-08
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.

jsoneditor-09
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.

jsoneditor-10
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.

jsoneditor-11
Imagem 11. Gerando a string JSON já com as mudanças realizadas

Na Listagem 4 está a string contendo todos os ajustes realizados.

{
  "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
    }
  ]
}

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.

jsoneditor-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/

Renato Groffe

Atua como consultor em atividades voltadas ao desenvolvimento de softwares há mais de 13 anos. Bacharel em Sistemas de Informação, com especialização em Engenharia de Software. Microsoft Certified Technology Specialist (Web, WCF, Distributed Applications, ADO.NET, Windows Forms), Microsoft Specialist (HTML5 with JavaScript and CSS3, Developing ASP.NET MVC 4 Web Applications), Oracle Certified Associate (PL/SQL), Sun Certified (SCJP, SCWCD), ITIL Foundation V2, Cobit 4.1 Foundation.

Facebook Google+ 

Comentários

comentarios