JSON.parse()

Tabla de contenido

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

Cuando se reciben datos de un servidor web, los datos siempre son una cadena.

Analice los datos con JSON.parse() y los datos se convertirán en un objeto JavaScript.

Ejemplo: análisis de JSON

Imaginemos que recibimos este texto de un servidor web:

'{"name":"John", "age":30, "city":"New York"}'

Utilice la función JavaScript JSON.parse() para convertir texto en un objeto JavaScript:

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

Asegúrese de que el texto esté en formato JSON; de lo contrario, obtendrá un error de sintaxis.

Utilice el objeto JavaScript en su página:

Ejemplo

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

<script>
document.getElementById("demo").innerHTML = obj.name;
</script>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Creating an Object from a JSON String</h2>

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

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

</body>
</html>

Matriz como JSON

Cuando se utiliza JSON.parse() en un JSON derivado de una matriz, el método devuelve una matriz de JavaScript, en lugar de un objeto de JavaScript.

Ejemplo

const text = '["Ford", "BMW", "Audi", "Fiat"]';
const myArr = JSON.parse(text);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Parsing a JSON Array.</h2>
<p>Data written as an JSON array will be parsed into a JavaScript array.</p>
<p id="demo"></p>

<script>
const text = '[ "Ford", "BMW", "Audi", "Fiat" ]';
const myArr = JSON.parse(text);
document.getElementById("demo").innerHTML = myArr[0];
</script>

</body>
</html>

Excepciones

Análisis de fechas

Los objetos de fecha no están permitidos en JSON.

Si necesita incluir una fecha, escríbala como una cadena.

Puedes volver a convertirlo en un objeto de fecha más tarde:

Ejemplo

Convierte una cadena en una fecha:

const text =
  '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
  const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
  
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a date object.</h2>
<p id="demo"></p>

<script>
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

O puede utilizar el segundo parámetro, de la función JSON.parse(), llamado reviver.

El parámetro reviver es una función que verifica cada propiedad, antes de devolver el valor.

Ejemplo

Convierte una cadena en una fecha, usando la función reviver:

const text =
  '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
  const obj = JSON.parse(text, function (key, value) {
  if 
  (key == "birth") {
    return new 
  Date(value);
  } else {
    
  return value;
  }
});
  
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a date object.</h2>

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

<script>
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

Funciones de análisis

No se permiten funciones en JSON.

Si necesita incluir una función, escríbala como una cadena.

Puedes volver a convertirlo en una función más tarde:

Ejemplo

Convierte una cadena en una función:

const text =
  '{"name":"John", "age":"function () {return 
  30;}", "city":"New York"}';
  const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
  
document.getElementById("demo").innerHTML = obj.name + ", " + 
  obj.age();

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a function.</h2>
<p id="demo"></p>

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

</body>
</html>

Debes evitar el uso de funciones en JSON, las funciones perderán su alcance, y tendrías que usar eval() para convertirlos nuevamente en funciones.