JSON.stringify()

Índice

Um uso comum do JSON é trocar dados de/para um servidor web.

Ao enviar dados para um servidor web, os dados devem ser uma linha.

Converta um objeto JavaScript em uma string com JSON.stringify().

Stringificar um objeto JavaScript

Imagine que temos este objeto em JavaScript:

const obj = {name: "John", age: 30, city: "New York"};

Use a função JavaScript JSON.stringify() para convertê-lo em uma string.

const myJSON = JSON.stringify(obj);

O resultado será uma string seguindo a notação JSON.

myJSON agora é uma string e está pronta para ser enviada a um servidor:

Exemplo

const obj = {name: "John", age: 30, city: "New York"};
const myJSON = 
  JSON.stringify(obj);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Create a JSON string from a JavaScript object.</h2>
<p id="demo"></p>

<script>
const obj = {name: "John", age: 30, city: "New York"};
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Você aprenderá como enviar JSON para um servidor nos próximos capítulos.

Stringificar um array JavaScript

Também é possível restringir arrays JavaScript:

Imagine que temos este array em JavaScript:

const arr = ["John", "Peter", "Sally", "Jane"];

Use a função JavaScript JSON.stringify() para convertê-lo em uma string.

const myJSON = JSON.stringify(arr);

O resultado será uma string seguindo a notação JSON.

myJSON agora é uma string e está pronta para ser enviada a um servidor:

Exemplo

const arr = ["John", "Peter", "Sally", "Jane"];
const myJSON = 
  JSON.stringify(arr);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Create a JSON string from a JavaScript array.</h2>
<p id="demo"></p>

<script>
const arr = ["John", "Peter", "Sally", "Jane"];
const myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Você aprenderá como enviar uma string JSON para um servidor nos próximos capítulos.

Armazenando Dados

Ao armazenar dados, os dados devem ter um determinado formato e, independentemente de onde você escolher armazená-los, texto é sempre um dos formatos legais.

JSON torna possível armazenar objetos JavaScript como texto.

Exemplo

Armazenando dados no armazenamento local

 // Storing data:
const myObj = {name: "John", 
  age: 31, city: "New York"};
const myJSON = 
  JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

  // Retrieving data:
let text = localStorage.getItem("testJSON");
let obj = 
  JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Store and retrieve data from local storage.</h2>
<p id="demo"></p>

<script>
// Storing data:
const myObj = { name: "John", age: 31, city: "New York" };
const myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

// Retrieving data:
let text = localStorage.getItem("testJSON");
let obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;
</script>

</body>
</html>

Exceções

Stringificar datas

Em JSON, objetos de data não são permitidos. A função JSON.stringify() irá converter quaisquer datas em strings.

Exemplo

const obj = {name: "John", today: new Date(), city : "New York"};
const myJSON = JSON.stringify(obj);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JSON.stringify() converts date objects into strings.</h2>
<p id="demo"></p>

<script>
const obj = {name: "John", today: new Date(), city: "New York"};
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Você pode converter a string novamente em um objeto de data no receptor.

Funções Stringify

Em JSON, funções não são permitidas como valores de objetos.

A função JSON.stringify() removerá quaisquer funções de um JavaScript objeto, tanto a chave quanto o valor:

Exemplo

const obj = {name: "John", age: function () {return 30;}, city: "New York"};
const myJSON = JSON.stringify(obj);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JSON.stringify() will remove any functions from an object.</h2>
<p id="demo"></p>

<script>
const obj = {name: "John", age: function () {return 30;}, city: "New York"};
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Isto pode ser omitido se você converter suas funções em strings antes de executar a função JSON.stringify().

Exemplo

const obj = {name: "John", age: function () {return 30;}, city: "New York"};
  obj.age = obj.age.toString();
const myJSON = JSON.stringify(obj);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JSON.stringify() will remove any functions from an object.</h2>
<p>Convert functions into strings to keep them in the JSON object.</p>

<p id="demo"></p>

<script>
const obj = {name: "John", age: function () {return 30;}, city: "New York"};
obj.age = obj.age.toString();
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Se você enviar funções usando JSON, as funções perderão seu escopo e o receptor teria que usar eval() para convertê-los novamente em funções.