As principais linguagens de programação dispõem de uma série de métodos para a realização de funções específicas nos sistemas que estamos desenvolvendo. Às vezes, precisamos converter determinados tipos de dados e estruturas para uma maior mobilidade e estabilidade de nossas aplicações. O método JSON.stringify() do JavaScript é uma das soluções utilizadas para isso.
Muitas pessoas iniciantes na programação se sentem um pouco intimidadas com novas funções — se acaso você for uma delas, não se preocupe. Neste guia, explicaremos passo a passo, de maneira simples e didática, como esses recursos funcionam. Tentamos conduzir seu aprendizado da melhor maneira, trazendo exemplos que incorporem a teoria mostrada no decorrer do conteúdo.
Ao final, certamente, você se sentirá uma pessoa mais preparada para lidar com esse método e com novas estruturas de dados para seus códigos. Vale a pena lembrar que esse é apenas mais um passo em uma longa caminhada na jornada de uma pessoa programadora experiente.
Para ajudar nisso, escolhemos os seguintes tópicos, considerados os principais quando falamos sobre o método JSON.stringify():
- O que é o método JSON Stringify e para que serve?
- Qual a sintaxe do JSON Stringify?
- Quais os parâmetros do JSON Stringify?
- Quais as diferenças entre JSON Stringify e JSON Parse?
- Quais os possíveis problemas de uso do JSON Stringify? Veja 3 exemplos
Então, mãos à obra e tenha o melhor proveito de nosso material!
O que é o método JSON Stringify e para que serve?
O JSON.stringify() é um dos vários métodos nativos da linguagem de programação JavaScript. Sua principal função é converter valores e objetos denotados na linguagem em uma String JSON — um conjunto de dados humanamente legível e representados apenas por conjuntos de caracteres.
Confira esse exemplo, em que pedimos para que o console imprima, usando o método, um array contendo os valores de três elementos, x, y e z:
console.log(JSON.stringify({ x: 1, y: 2, z:1 }));
A saída deverá ser:
'{"x":5,"y":6, “z”:1}'
Qual a sintaxe do JSON Stringify?
O método JSON.stringify() tem uma sintaxe bem simples:
JSON.stringify(valor ou objeto a ser convertido)
Aqui, você pode conferir um exemplo prático:
<!DOCTYPE html>
<html>
<body>
<h2>Exemplo prático de uso do método JSON.stringify(): </h2>
<p id="paragrafo"></p>
<script>
const objeto_1 = {nome: "Ana", data: new Date(), cidade: "São Joaquim"};
const meuJSON = JSON.stringify(objeto_1);
document.getElementById("paragrafo").innerHTML = meuJSON;
</script>
</body>
</html>
Saída:
Exemplo prático de uso do método JSON.stringify():
{“nome”:”Ana”,”data”:”2022-01-28T04:41:19.840Z”,”cidade”:”São Joaquim”}
Esse método de análise de dados também tem alguns parâmetros adicionais, os quais podem complementar suas funções durante o desenvolvimento de aplicações:
JSON.stringify(valor, replacer, space)
Conheceremos melhor esses parâmetros na próxima parte deste guia, confira!
Quais os parâmetros do JSON Stringify?
Replacer e space são os outros dois parâmetros que podem ser utilizados além do valor (ou “value”, como muitas pessoas chamam). Vamos abordar detalhadamente o funcionamento e o uso de cada um desses parâmetros, usando exemplos simples e práticos para a didática ser favorecida. Continue a leitura!
Parâmetro value
O parâmetro value — ou valor — tem a função de identificar o que será convertido pelo método JSON.stringify(). Tudo que é declarado nessa primeira posição terá uma saída estruturada em JSON String.
Confira esses exemplos:
a)
JSON.stringify({});
//a saída deverá ser '{}'
b)
//teste 1
let caracteres = “trybe”
JSON.stringify(caracteres);
//teste 2
JSON.stringify(‘trybe’);
//a saída deverá ser 'trybe' para ambos os comandos
c)
JSON.stringify(true);
//a saída deverá ser 'true'
d)
let caracteres = 1
JSON.stringify(caracteres);
//a saída deverá ser “1”
Parâmetro replacer
O parâmetro replacer é opcional, ou seja, não tem obrigatoriedade de ser declarado ao utilizar o método JSON.stringfy(). Ele será declarado sempre depois dos objetos, sendo separados por uma vírgula, assim:
JSON.stringify(value, replacer)
Sua função está na alteração do comportamento convencional do método JSON.stringfy(), fazendo a substituição de algumas chaves ou valores — também pode ser usado com uma função. Por exemplo, logo abaixo, você pode ver esse parâmetro sendo escrito como uma função em Javascript:
function replacer(key, value) {
if (typeof value === 'string') {
return undefined;
}
return value;
}
var teste = {linguagem: 'JavaScript', escola: 'Trybe', duração: 12};
JSON.stringify(teste, replacer);
Essa função terá o seguinte retorno:
"{\"duração\":12}"
Você consegue entender o por quê? Repare que a função pede o retorno do valor que não seja do tipo String, depois de realizar a análise do JSON.
O replacer também pode ser usado para filtrar chaves:
var objeto = {nome: 'Corsa', ano: '2020', donos: 3, preço: 13000, km: 800000};
JSON.stringify(objeto, ['preço']);
Podemos, também, filtrar por mais de uma chave:
var objeto = {nome: 'Corsa', ano: '2020', donos: 3, preço: 13000, km: 800000};
JSON.stringify(objeto, ['nome','donos', 'km']);
Lembrando que você pode testar esses códigos no console de seu próprio navegador — é só clicar em F12 e ir até a aba “console”.
O parâmetro Space
Esse parâmetro é utilizado para controlar o espaçamento dado nos dados de saída. Veja o exemplo:
var objeto = {nome: 'Corsa', ano: '2020', donos: 3, preço: 13000, km: 800000};
var a = 10;
JSON.stringify(objeto, ['preço'], a);
Aqui, como podemos observar no código, o valor do space será 10. Teremos 10 espaços antes da impressão dos dados pedidos, no caso, o “preço”. A saída será a seguinte:
"{
\"preço\": 13000
}"
É diferente se alterarmos o valor da variável “a” para 1:
"{
\"preço\": 13000
}"
Caso o valor de “a” seja uma String, ela será impressa no lugar dos espaços. Para ambos os casos, o limite é de 10:
var objeto = {nome: 'Corsa', ano: '2020', donos: 3, preço: 13000, km: 800000};
var a = "Anticonstitucionalissimamente";
JSON.stringify(objeto, ['preço'], a);
A saída será:
"{
Anticonsti\"preço\": 13000
}"
Quais as diferenças entre JSON Stringify e JSON Parse?
Se buscarmos uma maneira mais simples possível para explicar as diferenças e semelhanças entre os métodos JSON.stringify e JSON.parse(), talvez encontremos a seguinte resposta:
- o método JSON.stringify() analisa um um objeto em JavaScript e o transforma em uma String JSON;
- o método JSON.parse() analisa uma String JSON e, por sua vez, a transforma em um objeto em JavaScript.
Nada melhor do que um exemplo, para ver na prática como se dão essas diferenças:
const lago = {
agua: true,
peixe: "lambari",
tamanho: "2 km",
count: 1
};
console.log(JSON.stringify(lago));
console.log(JSON.parse(JSON.stringify(lago)));
Para a primeira análise, teremos a seguinte saída:
{"agua":true,"peixe":"lambari","tamanho":"2 km","count":1}
Já para a segunda, essa:
object { agua: true, peixe: "lambari", tamanho: "2km", count: 1 }
agua: true
count: 1
peixe: "lambari"
tamanho: "2km"
Portanto, como podemos ver, a diferença entre os dois métodos está no modelo de dados e de serialização utilizado para seus produtos, entre JSON e objetos JavaScript.
Quais os possíveis problemas de uso do JSON Stringify? Veja 3 exemplos
Ao longo do guia, tivemos várias aplicações do conteúdo que trouxemos, buscando esmiuçar cada detalhe do método JSON.stringify(). Como a prática é amiga da perfeição, escolhemos trazer mais 3 exemplos de aplicação dos principais pontos abordados até agora.
Tente replicá-los em sua máquina, seja na IDE, seja no Node ou mesmo em seu navegador. Procure modificar esses programas até entender, com detalhes, cada parte de sua estrutura. Prepare-se e vamos lá!
Exemplo 1 — A função replacer em prática
Neste exemplo, usaremos o método JSON.stringify() juntamente à função replacer nos casos em que temos o e-mail de um usuário em nosso arquivo JSON. Isso é bastante apropriado para não retornar em seu aplicativo informações que você não deseja:
const user = {
id: 1,
name: "Amir Amar",
email: "[email protected]"
};
function replacer(key, value) {
if (typeof value === "number") {
return undefined;
}
if (key === "email") {
return "Removido por segurança";
}
return value;
}
console.log(JSON.stringify(user, replacer));
O retorno no console desse código apresentado será:
{"name":"Amir Amar","email":"Removido por segurança"}
Esse é um bom exemplo para explicarmos um pouco sobre a segurança de um JSON. Repare que a informação está disponibilizada, mas não será mostrada em caso de ser acessada em nossa aplicação.
Mas nós, que estudamos e sabemos um pouco mais de JavaScript do que a maioria da população, sabemos que basta acessar o JSON diretamente para termos acesso a essa informação, pois ela ainda está lá, disponível.
Exemplo 2 — mais detalhes sobre o JSON .parse e .strigify()
Nesse exemplo, precisamos notar que apenas alguns dos dados primitivos usados em JavaScript serão processados recursivamente pelo JSON.parse() depois de usar o JSON.strigify():
const meuObj = {
string: 'um caractere ou um conjunto deles',
inteiros: 42,
booleanos: false,
dataObjeto: new Date('2022-01-31T23:59:59'), // formato de data é transformado em conjunto de caracteres;
undefinedValue: undefined, // tanto a chave quanto o valor serão perdidos ao serem analisados e encontrados como “undefined”;
valornull: null,
infinito: Infinity, // Números infinitos serão perdidos e considerados “null”;
notANumber: NaN, // Valores NaN serão perdidos e considerados “null”;
regExpObject: /.*/, // Quaisquer dados RegExp serão perdidos e considerados como objetos vazios ({});
}
console.log(meuObj) /
const minhaDeepCopy = JSON.parse(JSON.stringify(meuObj))
console.log(minhaDeepCopy) // Object { string: "um caracter ou conjunto deles", inteiros: 42, booleanos: false, dataObjeto: Date Mon Jan 31 2022 23:59:59 GMT-0300 (Horário Padrão de Brasília), undefinedValue: undefined, valornull: null, infinito: Infinity, notANumber: NaN, regExpObject: /.*/ }
console.log(typeof minhaDeepCopy.dateObject) // Aqui a saída deverá responder “string” para o tipo de dado date, já que foi “strignificado” pelo método.
Exemplo 3 — armazenando dados localmente e usando o JSON.stringfy()
A seguir, você confere um exemplo bem simples de uma página que armazena os dados de maneira local com ajuda do método JSON.stringify():
<!DOCTYPE html>
<html>
<body>
<h2>Armazenando dados locais com JSON.stringify()</h2>
<p id="p"></p>
<script>
// Armazenando os dados que queremos:
const meuObjLista = { nome: "Trybe", site: "betrybe.com", país: "Brasil" };
const meuJSON = JSON.stringify(meuObjLista);
localStorage.setItem("teste", meuJSON);
// obtendo as informações:
let text = localStorage.getItem("teste");
let obj = JSON.parse(text);
document.getElementById("p").innerHTML = obj.nome;
</script>
</body>
</html>
Chegamos ao fim de mais um guia. Percorremos, ao longo de nosso texto, muitos dos detalhes que contribuirão para o entendimento dos próximos códigos que você tiver em mãos, tenha certeza disso. Agora que você já conhece os principais recursos do método JSON.stringify, comece a colocá-los em prática. Use os exemplos que abordamos e modifique-os, criando novos sistemas.
Se você quer se aprofundar ainda mais em programação e entrar de cabeça no mercado de desenvolvimento, mas ainda está com dúvidas sobre como proceder, entre em contato com a Trybe! Você também pode fazer a inscrição em nosso processo seletivo — acesse nosso curso introdutório gratuito de JavaScript e tire todas as suas dúvidas em nossa comunidade do Slack.
