Converter objeto JavaScript em JSON

1. Visualizando Objeto JavaScript com console.log(jsObject)
2. Usando o JSON.stringify() para converter objeto JSON em uma string
3. Usando código personalizado para converter objetos JavaScript em JSON
4. Obtendo um objeto JavaScript de volta de uma string JSON

JSON é um formato de transferência de dados comumente usado para representar objetos em javascript. Usamos o formato JSON como formato padrão na maioria das comunicações cliente-servidor para transferência de dados. A notação JSON é fácil de usar e interpretar, pois é um formato legível por humanos de um objeto JavaScript. É fácil converter um objeto javascript em um formato JSON. Podemos convertê-lo das seguintes maneiras.

Visualizando Objeto JavaScript com console.log(jsObject)

A função console.log é construída para enviar mensagens para o console da web. Podemos ver as mensagens usando as ferramentas de desenvolvedor de um navegador da web. A função conosle.log() aceita um objeto, mensagem e até substrings. Portanto, é mais adequado para nos ajudar a entender a aparência de um objeto JavaScript. Quando console.log uma variável que contém um objeto, obtemos sua representação visual JSON. O código a seguir descreve a representação de um objeto javascript usando o console.log.

var a = {};
a.id = 1;
a.name = 'icy-cream';
a.flavor = 'vanilla';
console.log(a);

Produção:

{id: 1, name: "icy-cream", flavor: "vanilla"}

No código acima, console.log(a) produz o formato JSON do objeto a. Receberemos a mesma representação JSON em todos os navegadores para o objeto javascript, pois conosle.log() é compatível com todos os navegadores, incluindo o hostil explorador da Internet. Por meio da opção console.log(), podemos apenas visualizar a representação JSON de um objeto e não podemos editá-lo ou usá-lo para outro tratamento de dados programáticos que não seja apenas visualizá-lo no console da web.

Usando o JSON.stringify() para converter objeto JSON em uma string

Outra maneira de obter a representação JSON para um objeto javascript é usando o método JSON.stringify(). Podemos usar o formato JSON de um objeto JavaScript e atribuí-lo a variáveis ​​usando o método JSON.stringify(). JSON.stringify() converte o objeto javascript e retorna o valor JSON para o objeto como dados de string.

Sintaxe

JSON.stringify(<JSObject>)

Parâmetros

A função usa o objeto JavaScript como parâmetro, aceita uma função replacer e contagem de espaço como parâmetros opcionais.

• Fornecemos nosso objeto JavaScript de destino para converter em JSON como o primeiro parâmetro para a função JSON.stringify().
• Usamos a função replacer para alterar o objeto JSON. Usando-o, podemos especificar os atributos que desejamos filtrar do objeto antes de convertê-lo em um formato JSON.
• O parâmetro contagem de espaço é um valor numérico ou string que especifica o número de caracteres de espaço a serem colocados na string JSON de saída para torná-la em um formato legível por humanos.

Valor de retorno

JSON.stringify() retorna o formato JSON da string do objeto JavaScript.

Uso

Vamos usar o mesmo objeto que usamos na seção anterior. Mas, desta vez, usaremos o JSON.stringify() para convertê-lo em uma string JSON. Consulte o código a seguir.

var a = {};
a.id = 1;
a.name = 'icy-cream';
a.flavor = 'vanilla';
console.log(JSON.stringify(a));
console.log(JSON.stringify(a, null, 0));
console.log(JSON.stringify(a, null, 5));

Produção:

{"id":1,"name":"icy-cream","flavor":"vanilla"}
{"id":1,"name":"icy-cream","flavor":"vanilla"}
{
     "id": 1,
     "name": "icy-cream",
     "flavor": "vanilla"
}

Usando um número no terceiro parâmetro para a função JSON.stringify(), obtemos uma string JSON mais legível como uma saída. O método formatará o JSON adicionando o número especificado de espaços antes de cada par de valores-chave do JSON. Por exemplo, em JSON.stringify(a, null, 5), o parâmetro id do objeto a é colocado após cinco caracteres de espaço.

Usando código personalizado para converter objetos JavaScript em JSON

Se quisermos escrever nosso código para converter o objeto JavaScript em um formato JSON, teremos que usar a função Object.keys(). Object.keys() é um método javascript que extrai as keys de um objeto e retorna um array contendo as keys. Portanto, com nosso código personalizado, combinamos as keys e os values do objeto javascript e os incluímos entre as chaves {} para obter a representação JSON do objeto javascript. Vejamos o código abaixo.

var a = {};
a.id = 1;
a.name = 'icy-cream';
a.flavor = 'vanilla';
var keys = Object.keys(a);
var JSONOut = '{';
for (let i = 0; i < keys.length; i++) {
  JSONOut = JSONOut + `"${keys[i]}":"${a[keys[i]]}",`;
}
JSONOut = JSONOut + '}';
console.log(JSONOut);

Produção:

{"id":"1","name":"icy-cream","flavor":"vanilla",}

Obtendo um objeto JavaScript de volta de uma string JSON

Na maioria dos aplicativos da web, armazenamos os objetos javascript como uma string JSON no banco de dados para que seja fácil usá-los para renderizar a mesma IU posteriormente. Podemos armazenar o JSON no banco de dados como uma string JSON. Como obtemos o JSON de volta ou o objeto JavaScript correspondente à string JSON extraída do banco de dados usando uma API REST? JavaScript tem o método JSON.parse() para converter o JSON de volta em um objeto JavaScript. Consulte o código a seguir.

var response = `{
     "id": 1,
     "name": "icy-cream",
     "flavor": "vanilla"
}`
console.log(JSON.parse(response));
var a = JSON.parse(response);
a.id = 20;
console.log(a);

Produção:

{id: 1, name: "icy-cream", flavor: "vanilla"}
{id: 20, name: "icy-cream", flavor: "vanilla"}

Usando o código acima, convertemos a string JSON de volta em um objeto javascript pelo método JSON.parse() e a atribuímos a uma variável. Alterar o valor do atributo id do mesmo objeto javascript também altera o valor do atributo. Portanto, podemos converter a string JSON em um objeto javascript válido que podemos manipular programaticamente no código. Observe que podemos usar o caractere til para aceitar uma string com várias quebras de linha.