JSON.parse()

El uso común de JSON es la transferencia de datos con el servidor web.

Al recibir datos del servidor web, los datos siempre son cadenas.

A través de JSON.parse() Analizar los datos, que se convertirán en objetos JavaScript.

Ejemplo - análisis de JSON

Imaginemos que recibimos este texto desde el servidor web:

'{ "name":"Bill Gates", "age":62, "city":"Seattle"}'

Por favor, use la función JavaScript JSON.parse() Convertir texto en objeto JavaScript:

var obj = JSON.parse('{ "name":"Bill Gates", "age":62, "city":"Seattle"}');

Asegúrese de que este texto esté escrito en formato JSON, de lo contrario, aparecerá un error de sintaxis.

Por favor, use un objeto JavaScript en su página:

Ejemplo

<p id="demo"></p> 
<script>
 document.getElementById("demo").innerHTML = obj.name + ", " + obj.age; 
</script>

Pruébelo usted mismo

JSON proveniente del servidor

Puede solicitar JSON del servidor utilizando solicitudes AJAX.

Si la respuesta del servidor está escrita en formato JSON, puede analizar la cadena en un objeto de JavaScript.

Ejemplo

Por favor, use XMLHttpRequest para obtener datos del servidor:

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", "json_demo.txt", true);
xmlhttp.send();

Pruébelo usted mismo

Ver json_demo.txt

Como array de JSON

Al usar JSON derivado de un array JSON.parse() Después de eso, este método devolverá un array de JavaScript, en lugar de un objeto de JavaScript.

Ejemplo

El JSON devuelto por el servidor es un array:

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

Pruébelo usted mismo

Ver json_demo_array.txt

Excepción

Analizar fechas

No se permite el objeto de fecha en JSON.

Si necesita incluir una fecha, escriba como una cadena.

Después puede convertirla de nuevo a un objeto de fecha:

Ejemplo

Convertir la cadena a una fecha:

var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "ciudad":"Seattle"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Pruébelo usted mismo

o puede usar JSON.parse() El segundo parámetro de la función, se llama reviver.

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

Ejemplo

Convertir la cadena a una fecha, usando la función reviver:

var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var 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

Analizar funciones

No se permite funciones en JSON.

Si necesita incluir una función, escriba como una cadena.

Más tarde puede convertirla de nuevo a una función:

Ejemplo

Convertir una cadena a una función:

var text = '{ "name":"Bill Gates", "age":"function () {return 62;}", "ciudad":"Seattle"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " +  obj.age();

Pruébelo usted mismo

Debería evitar usar funciones en JSON, ya que las funciones perderán su ámbito y también necesitará usar eval() Conviértelas de nuevo en funciones.

Compatibilidad del navegador

Todos los navegadores principales y el estándar ECMAScript (JavaScript) más reciente incluyen JSON.parse() Función:

Los números en la siguiente tabla especifican el soporte completo JSON.parse() Primera versión del navegador de la función:

Sí 8.0 3.5 4.0 10.0

Para navegadores más antiguos, están disponibles las bibliotecas JavaScript en las siguientes direcciones:

https://github.com/douglascrockford/JSON-js