JSON (JavaScript Object Notation) é um formato de texto para a troca de dados entre clientes (páginas web) e servidores.
Em outras palavras, páginas web e servidores podem trocar apenas dados de texto. Portanto, se você deseja enviar algum conteúdo JavaScript para um servidor, é necessário converter o código para um formato de texto (JSON).
Como Converter um Objeto JavaScript para JSON
O objeto global JSON do JavaScript contém um método chamado stringify() para converter um objeto JavaScript em um texto JSON.
INFO: A conversão de um objeto JavaScript para um texto JSON é chamada de serialização.
Exemplo: Converter um objeto de array JavaScript para JSON
// Criar um array JavaScript: const minhaBio = ["Oluwatobi", "Sofela", "CodeSweetly"]; // Converter o array minhaBio para JSON (formato de texto): JSON.stringify(minhaBio); // A chamada acima retornará: '["Oluwatobi","Sofela","CodeSweetly"]'
Exemplo: Converter um objeto JavaScript para JSON
// Criar um objeto JavaScript:
const minhaBio = {
firstName: "Oluwatobi",
lastName: "Sofela",
company: "CodeSweetly",
};
// Converter o objeto minhaBio para JSON (formato de texto):
JSON.stringify(minhaBio);
// A chamada acima retornará:
// '{"firstName":"Oluwatobi","lastName":"Sofela","company":"CodeSweetly"}'Se o objeto JavaScript que você deseja converter contiver uma função, nesse caso, JSON.stringify() removerá a função (e sua chave).
JSON.stringify() remove funções de um objeto JavaScript porque não pode converter uma função para um texto JSON.
Exemplo: Converter um objeto JavaScript contendo uma função para JSON
// Criar um objeto JavaScript:
const minhaBio = {
firstName: "Oluwatobi",
lastName: function () {
return "Sofela";
},
company: "CodeSweetly",
};
// Converter o objeto minhaBio para JSON (formato de texto):
JSON.stringify(minhaBio);
// A chamada acima retornará:
// '{"firstName":"Oluwatobi","company":"CodeSweetly"}'Como impedir que JSON.stringify() remova a função de um objeto
Você pode evitar a remoção da função do seu objeto convertendo-a em uma string antes de chamar JSON.stringify().
Aqui está um exemplo:
// Criar um objeto JavaScript:
const minhaBio = {
firstName: "Oluwatobi",
lastName: function () {
return "Sofela";
},
company: "CodeSweetly",
};
// Converter a função lastName para uma string:
minhaBio.lastName = minhaBio.lastName.toString();
// Converter o objeto minhaBio para JSON (formato de texto):
JSON.stringify(minhaBio);
// A chamada acima retornará:
// '{"firstName":"Oluwatobi","lastName":"function () {\n return \"Sofela\";\n }","company":"CodeSweetly"}'OBSERVAÇÃO, é melhor evitar funções em JSON porque:
Uma função convertida em string perderá seu escopo. Será necessário usar o método eval() não seguro para converter uma função convertida em string de volta para uma função regular.
Como Converter um Texto JSON para um Objeto JavaScript
O objeto global JSON do JavaScript contém um método chamado parse() para converter um texto JSON em um objeto JavaScript.
INFO: A conversão de dados JSON para um objeto JavaScript é chamada de desserialização.
Exemplo: Converter um texto JSON para um objeto JavaScript
/ Criar um texto JSON:
const minhaBio = '{"firstName":"Oluwatobi","lastName":"Sofela","company":"CodeSweetly"}';
// Converter o texto JSON minhaBio para um objeto JavaScript:
JSON.parse(minhaBio);
// A chamada acima retornará:
{ firstName: "Oluwatobi", lastName: "Sofela", company: "CodeSweetly" };Vamos ver outro exemplo.
Exemplo: Converter um texto JSON para um array JavaScript
// Criar um texto JSON: const minhaBio = '["Oluwatobi","Sofela","CodeSweetly"]'; // Converter o array minhaBio para JSON (formato de texto): JSON.parse(minhaBio); // A chamada acima retornará: ["Oluwatobi", "Sofela", "CodeSweetly"];
Lembre-se de que um texto JSON é diferente de um objeto JSON. Vamos discutir suas diferenças.
JSON Text vs. JSON Object: Qual a Diferença?
JSON Text:
- Um texto JSON é uma representação em formato de string de dados para transmitir conteúdo entre clientes e servidores.
- É simplesmente uma sequência de caracteres que segue a sintaxe do JSON.
- Exemplo de texto JSON: '{"firstName":"John","lastName":"Doe","age":30}'
JSON Object:
- Um objeto JSON refere-se ao objeto global embutido no JavaScript, que contém métodos para serialização e desserialização.
- O objeto JSON em JavaScript oferece os métodos stringify() para converter objetos JavaScript em texto JSON e parse() para converter texto JSON de volta para objetos JavaScript.
- Exemplo de utilização: JSON.stringify(objeto) e JSON.parse(textoJSON).
- Pode conter dados estruturados usando a notação de objetos, arrays, strings, números, booleanos e valores nulos.
Principais Diferenças:
- Formato vs. Objeto Global: O texto JSON é uma representação em string de dados, enquanto o objeto JSON em JavaScript é o objeto global que fornece funcionalidades para manipular dados JSON.
- Transmissão de Dados vs. Manipulação de Dados: O texto JSON é utilizado principalmente para transmitir dados entre clientes e servidores, enquanto o objeto JSON em JavaScript é usado para manipular e trabalhar com dados JSON no lado do cliente.
- Simples Sequência de Caracteres vs. Objeto Estruturado: Um texto JSON é uma simples sequência de caracteres formatada de acordo com a sintaxe JSON, enquanto um objeto JSON em JavaScript é uma estrutura de dados que pode incluir objetos, arrays e outros tipos de dados.
- Serialização e Desserialização: Enquanto o texto JSON é usado para serialização (converter um objeto em uma string), o objeto JSON em JavaScript oferece métodos para ambas as operações, sendo usado para desserialização (converter uma string JSON de volta para um objeto).
Em resumo, o texto JSON é uma representação de dados em string, enquanto o objeto JSON em JavaScript é o mecanismo embutido que fornece métodos para trabalhar com essa representação. Ambos desempenham papéis diferentes no processo de comunicação e manipulação de dados.
JSON Text vs. JavaScript Object: Qual a Diferença?
JSON texts e objetos JavaScript são quase idênticos, mas apresentam algumas diferenças sutis.
Citação em um JSON text vs. Objeto JavaScript
- As chaves e strings em um JSON devem ser duplamente citadas.
- As chaves em JavaScript podem ser citadas com aspas simples, duplas, sem citação ou números.
- Além disso, os valores de string em JavaScript podem ser citados com aspas simples.
Exemplo
// JSON text com um par chave/valor:
{ "name": "CodeSweetly" }
// Objeto JavaScript com um par chave/valor:
{ name: 'CodeSweetly' }
// JSON permite aspas simples apenas em torno do texto JSON inteiro, como abaixo:
'{"name": "CodeSweetly"}'Tipos de valor permitidos em um JSON text vs. Objeto JavaScript
Os valores em JSON podem ser:
- String (entre aspas duplas)
- Número
- Objeto JSON
- Array JSON
- Booleano
- Nulo
OBSERVAÇÃO: Os valores em JSON não podem ser uma função, data ou indefinido.
Os valores de um objeto JavaScript podem ser:
- Qualquer um dos seis (6) valores JSON
- Função
- Data
- Indefinido
Vírgula final em um JSON text vs. Objeto JavaScript
JSON proíbe o uso de vírgulas finais, enquanto JavaScript o permite.
Exemplo:
// JSON proíbe vírgulas finais:
const company = { "name": "CodeSweetly" }
// JavaScript permite vírgulas finais:
const company = { name: 'CodeSweetly', }JSON vs. XML: Qual a Diferença?
JSON e XML são formatos populares para a transmissão de dados entre clientes (páginas web) e servidores. Abaixo estão sete diferenças-chave entre esses dois formatos de troca de dados.
- Facilidade de Análise (Parsing):
- JSON é mais fácil de analisar. Uma função JavaScript padrão pode analisar JSON, enquanto é necessário usar um analisador XML para analisar XML.
- Desserialização para Objetos JavaScript:
- É fácil desserializar JSON para objetos JavaScript nativos. No entanto, é necessário código personalizado para desserializar XML.
- Velocidade e Facilidade de Uso em Aplicações AJAX:
- JSON é mais rápido e mais fácil de usar em aplicações AJAX.
- Uso de Arrays:
- JSON pode usar arrays, enquanto XML não suporta arrays diretamente.
- Leitura e Escrita Rápidas:
- Ler e escrever JSON é mais rápido do que XML.
- Tamanho do Código:
- JSON é geralmente mais curto que XML.
- Uso de Tags de Fim:
- XML utiliza tags de fim, enquanto JSON não as utiliza.
Aqui está um exemplo de código JSON que define um objeto "children" contendo uma matriz de quatro objetos "child":
{
"children": [
{ "name": "Oluwatobi", "bestColor": "Blue" },
{ "name": "Grace", "bestColor": "Pink" },
{ "name": "Mary", "bestColor": "Green" },
{ "name": "Sofela", "bestColor": "White" }
]
}E aqui está o equivalente XML do trecho JSON acima:
<children>
<child>
<name>Oluwatobi</name> <bestColor>Blue</bestColor>
</child>
<child>
<name>Grace</name> <bestColor>Pink</bestColor>
</child>
<child>
<name>Mary</name> <bestColor>Green</bestColor>
</child>
<child>
<name>Sofela</name> <bestColor>White</bestColor>
</child>
</children>É possível observar que o trecho JSON é mais limpo e curto.
Sugestão de Cursos
Descubra o caminho para se tornar um especialista em programação web. Aprenda HTML, CSS, JavaScript e os principais frameworks nesta jornada emocionante. Com instrutores experientes e materiais práticos, você desenvolverá habilidades práticas para criar sites impressionantes e aplicativos interativos. Impulsione sua carreira na indústria de tecnologia e abra portas para oportunidades de emprego lucrativas. Garanta sua vaga hoje mesmo e inicie sua jornada para se tornar um desenvolvedor web de sucesso.
Método Para Aprender a Programar do Absoluto ZERO com Node.js, React e React Native.
As tecnologias ensinadas no curso são responsáveis por muitas vagas no mercado de trabalho.
Além da alta demanda, os salários vão de R$47.000,00 até R$197.000,00 anuais tendo empresas que possibilitam o trabalho remoto e até vagas Internacionais.
Para que você possa estar apto a preencher uma dessas vagas eu vou te apresentar o passo a passo para você se tornar um verdadeiro expert nessas tecnologias.
O curso te dará o passo a passo de como criar estruturar de um sistema do zero com Node.js, React e React Native.