JSON.stringify()

Tabla de contenido

Un uso común de JSON es intercambiar datos hacia/desde un servidor web.

Al enviar datos a un servidor web, los datos deben ser una cuerda.

Convierta un objeto JavaScript en una cadena con JSON.stringify().

Stringificar un objeto JavaScript

Imaginemos que tenemos este objeto en JavaScript:

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

Utilice la función JavaScript JSON.stringify() para convertirlo en una cadena.

const myJSON = JSON.stringify(obj);

El resultado será una cadena siguiendo la notación JSON.

myJSON ahora es una cadena y está lista para ser enviada a un servidor:

Ejemplo

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

Pruébelo usted mismo →

<!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>

Aprenderá cómo enviar JSON a un servidor en los próximos capítulos.

Stringificar una matriz de JavaScript

También es posible encadenar matrices de JavaScript:

Imaginemos que tenemos esta matriz en JavaScript:

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

Utilice la función JavaScript JSON.stringify() para convertirlo en una cadena.

const myJSON = JSON.stringify(arr);

El resultado será una cadena siguiendo la notación JSON.

myJSON ahora es una cadena y está lista para ser enviada a un servidor:

Ejemplo

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

Pruébelo usted mismo →

<!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>

Aprenderá cómo enviar una cadena JSON a un servidor en los próximos capítulos.

Almacenamiento de datos

Al almacenar datos, los datos deben tener un formato determinado e independientemente de dónde elija almacenarlos, texto es siempre uno de los formatos legales.

JSON permite almacenar objetos JavaScript como texto.

Ejemplo

Almacenamiento de datos en almacenamiento 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;

Pruébelo usted mismo →

<!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>

Excepciones

Stringificar fechas

En JSON, los objetos de fecha no están permitidos. La función JSON.stringify() convertirá cualquier fecha en cadenas.

Ejemplo

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

Pruébelo usted mismo →

<!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>

Puede convertir la cadena nuevamente en un objeto de fecha en el receptor.

Funciones de cadena

En JSON, las funciones no están permitidas como valores de objeto.

La función JSON.stringify() eliminará cualquier función de JavaScript objeto, tanto la clave como el valor:

Ejemplo

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

Pruébelo usted mismo →

<!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>

Esto se puede omitir si convierte sus funciones en cadenas antes de ejecutar la función JSON.stringify().

Ejemplo

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

Pruébelo usted mismo →

<!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>

Si envía funciones usando JSON, las funciones perderán su alcance y el receptor Tendría que usar eval() para convertirlos nuevamente en funciones.