JSON.parse()

JSON se usa normalmente para intercambiar datos con el servidor.

Al recibir datos del servidor, normalmente son cadenas.

Podemos usar el método JSON.parse() para convertir los datos en objetos de JavaScript.

Sintaxis

JSON.parse(text[, reviver])

Descripción de parámetros:

  • text:Obligatorio, una cadena JSON válida.
  • reviver:Opcional, una función que transforma el resultado; se llamará a esta función para cada miembro del objeto.

Ejemplo de parseo JSON

Por ejemplo, recibimos los siguientes datos del servidor:

{ "name":"ejemplo", "alexa":10000, "site":"www.example.com" }

Usamos el método JSON.parse() para procesar los datos anteriores y convertirlos en objetos de JavaScript:

var obj = JSON.parse('{ "name":"ejemplo", "alexa":10000, "site":"www.example.com" }');

Antes de parsear, asegúrate de que tus datos estén en formato JSON estándar; de lo contrario, se producirá un error de parseo.

Puedes utilizar nuestra herramienta en línea para verificarlo:https://www.jyshare.com/front-end/53。

Una vez completado el parseo, ya podemos usar los datos JSON en la página web:

Ejemplo

<p id="demo"></p> <script> var obj = JSON.parse('{ "name":"ejemplo", "alexa":10000, "site":"www.example.com" }'); document.getElementById("demo").innerHTML = obj.name + "：" + obj.site; </script>

Pruébalo »

Recibir datos JSON desde el servidor

Podemos usar AJAX para solicitar datos JSON del servidor y parsearlos como objetos de JavaScript.

Ejemplo

var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myObj = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myObj.name; } }; xmlhttp.open("GET", "/try/ajax/json_demo.txt", true); xmlhttp.send();

Pruébalo »

Ver los datos del servidor:

Recibir datos JSON de un array desde el servidor

Si los datos JSON recibidos del servidor son un array, JSON.parse los convertirá en un array de JavaScript:

Ejemplo

var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myArr = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myArr[1]; } }; xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true); xmlhttp.send();

Pruébalo »

Ver los datos del servidor:

Excepción

Parseo de datos

JSON no puede almacenar objetos Date.

Si necesitas almacenar un objeto Date, debes convertirlo a una cadena.

Después, vuelve a convertir la cadena a un objeto Date.

Ejemplo

var text = '{ "name":"Ejemplo", "initDate":"2013-12-14", "site":"www.example.com"}'; var obj = JSON.parse(text); obj.initDate = new Date(obj.initDate); document.getElementById("demo").innerHTML = obj.name + "Crear fecha:" + obj.initDate;

Pruébalo »

Podemos activar el segundo parámetro de JSON.parse, reviver, una función que transforma el resultado; esta función se llama para cada miembro del objeto.

Ejemplo

var text = '{ "name":"Ejemplo", "initDate":"2013-12-14", "site":"www.example.com"}'; var obj = JSON.parse(text, function (key, value) { if (key == "initDate") { return new Date(value); } else { return value; }}); document.getElementById("demo").innerHTML = obj.name + "Crear fecha:" + obj.initDate;

Pruébalo »

Funciones de parseo

JSON no permite incluir funciones, pero puedes almacenar la función como una cadena y luego convertir la cadena en una función.

Ejemplo

var text = '{ "name":"Ejemplo", "alexa":"function () {return 10000;}", "site":"www.example.com"}'; var obj = JSON.parse(text); obj.alexa = eval("(" + obj.alexa + ")"); document.getElementById("demo").innerHTML = obj.name + "Ranking de Alexa:" + obj.alexa();

Pruébalo »

No se recomienda usar funciones en JSON.

Compatibilidad del navegador

Los navegadores principales son compatibles con la función JSON.parse():

Compatible 8.0 3.5 4.0 10.0

Los navegadores antiguos pueden usar librerías de terceros para tener compatibilidad:https://github.com/douglascrockford/JSON-js

Otras extensiones