Um Tutorial sobre como Trabalhar com JSON.parse() e JSON.stringify()

Hark Labs2022-04-28 · 5 min read

Um Tutorial sobre como Trabalhar com JSON.parse() e JSON.stringify()

JSON significa JavaScript Object Notation. É usado para descrever JavaScript objects. É um formato de compartilhamento de dados que especifica valores de dados usando pares chave-valor. O objeto JSON é suportado em todos os principais navegadores. Este tutorial exige que você esteja familiarizado com JavaScript e com o trabalho com o objeto JSON. Para se familiarizar com o JSON, você pode dar uma olhada em nossa visão geral do formato de compartilhamento de dados JSON. Você também pode conferir como trabalhar com JSON em JavaScript.

O formato JSON também é usado para transmitir dados pela rede. Para esse propósito, os dados precisam ser serializados e desserializados. Quando os dados estão no formato JSON, eles são convertidos em uma string usando o stringify método. Para converter os dados de volta ao formato de objeto para manipulação, o parse método é usado. Este tutorial vai passar pelas etapas de uso do JSON.parse() e JSON.stringify(). Vamos começar!

JSON.parse()

Este método é usado para converter uma string JSON em um objeto JSON para que possa ser manipulado programaticamente. A string enviada precisa ser uma string JSON válida, caso contrário, uma exceção será lançada. Esta string pode ser recebida de qualquer serviço web ou aplicativo remoto.

Este método aceita dois parâmetros: uma string e uma callback função que pode ser usada para manipular a string antes de convertê-la em um objeto. Suponha que estejamos recebendo uma mensagem de um serviço web indicando o status da ação, a mensagem e o código de status. Abaixo está um exemplo simples de como uma string pode ser convertida em um objeto.

Código:

let json_string = '{"message":"Concluído com sucesso", "status":200, "code":200}'
let server_obj = JSON.parse(json_string);
console.log(server_obj)

let json_string = '{"message":"Concluído com sucesso", "status":200, "code":200}'

let server_obj = JSON.parse(json_string);

console.log(server_obj)

Saída:

{message: 'Concluído com sucesso', status: 200, code: 200}

1	{message: 'Concluído com sucesso', status: 200, code: 200}

Um problema comum é quando vírgulas finais são adicionadas à string, então o JSON.parse() lança um erro se a string passada para ele tiver vírgulas finais. Se você precisar manipular os valores, pode passar a callback como função no segundo argumento.

Código:

let string = '{"name":"XYZ","email":"xyz@example.com"}';
let obj = JSON.parse(string, (key, value) => {
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
return value;
});

console.log(obj)

let string = '{"name":"XYZ","email":"xyz@example.com"}';

let obj = JSON.parse(string, (key, value) => {

if (typeof value === 'string') {

return value.toUpperCase();

}

return value;

});

console.log(obj)

Saída:

{name: 'XYZ', email: 'XYZ@EXAMPLE.COM'}

1	{name: 'XYZ', email: 'XYZ@EXAMPLE.COM'}

JSON.stringify()

O stringify método faz exatamente o oposto do parse método. Aqui, o objeto JSON é passado e o valor de retorno é uma string. Esta string pode ser passada para algum outro serviço web remoto, por exemplo, e depois analisada novamente em um objeto JSON para manipulação.

Código:

let obj = {message:"Concluído com sucesso", status:200, code:200}
let str = JSON.stringify(obj);
console.log(str);

let obj = {message:"Concluído com sucesso", status:200, code:200}

let str = JSON.stringify(obj);

console.log(str);

Saída:

{"message":"Concluído com sucesso","status":200,"code":200}

1	{"message":"Concluído com sucesso","status":200,"code":200}

O método stringify pode receber dois argumentos: os métodos replacere spacer. O método replacer pode ser usado para substituir ou excluir quaisquer valores na string.

Código:

let obj = {message:"Concluído com sucesso", status:200, code:200}
let str = JSON.stringify(obj, (key, value) => {
    if (status === 200) {
        return undefined;
    }
    return value;
});

console.log(str)

let obj = {message:"Concluído com sucesso", status:200, code:200}

let str = JSON.stringify(obj, (key, value) => {

if (status === 200) {

return undefined;

}

return value;

});

console.log(str)

Saída:

{"message":"Concluído com sucesso","status":200,"code":200}

1	{"message":"Concluído com sucesso","status":200,"code":200}

Quando o argumento spacer for fornecido, cada elemento de um array ou objeto é colocado em sua própria linha e recuado para indicar sua profundidade na hierarquia dos objetos e arrays. Abaixo está um trecho de código simples que ilustra isso.

Código:

let obj = {message:"Concluído com sucesso", status:200, code:200}
let str = JSON.stringify(obj, null, "---");
console.log(str)

let obj = {message:"Concluído com sucesso", status:200, code:200}

let str = JSON.stringify(obj, null, "---");

console.log(str)

Saída:

{
---"message": "Concluído com sucesso",
---"status": 200,
---"code": 200
}

{

---"message": "Concluído com sucesso",

---"status": 200,

---"code": 200

}

Conclusão

Neste tutorial, analisamos dois métodos úteis para trabalhar com conteúdo formatado em JSON. Objetos JSON estão em toda parte e, ao construir aplicações modernas usando JavaScript, esses métodos são muito úteis. Para saber mais, confira os seguintes tutoriais em nosso blog:

Feliz Computação!

Hark Labs

Autor · CloudSigma

Preslav Dobrev é um designer criativo na CloudSigma, focado na construção de uma identidade empresarial consistente por meio de canais de marketing tradicionais e inovadores. Ele é hábil em combinar a visão artística com o marketing estratégico para criar narrativas de marca impactantes.

Um Tutorial sobre como Trabalhar com JSON.parse() e JSON.stringify()

JSON.parse()

JSON.stringify()

Conclusão

Hark Labs

Comentários