Como utilizar JSON.parse

Hoy vamos a ver como utilizar JSON.parse.

La respuesta JSON en una solicitud Ajax es un string, no es un objeto JavaScript sino una cadena de texto con notación de objeto JavaScript, esto es JSON. Es necesario convertir esta cadena a un objeto antes de intentar trabajar con los datos. Esta conversión se realiza con el método JSON.parse. El siguiente ejemplo es exactamente igual que el anterior pero la variable misDatos es un string (fíjate en las comillas) y es necesario aplicar JSON.parse para convertirlo en un objeto JavaScript:

// La variable misDatos es un string en notación JSON, pero no un objeto
var misDatos = '{ "nombre" : "Antonio", "apellidos" : "Molina Ballesteros", "edad" : 35, "direccion" : { "calle" : "Gran Via, 2", "ciudad" : "Madrid"} }';

// Se pasa el string a un objeto JSON
var jsonObj = JSON.parse( misDatos );

// Ahora, la variable jsonObj contiene el valor de cada key accesible en la forma jsonObj.key
console.log( jsonObj.nombre );
console.log( jsonObj.apellidos );
console.log( jsonObj.edad );
console.log( jsonObj.direccion.calle );
console.log( jsonObj.direccion.ciudad );

Como recibir los datos en JSON

Hola amigos en este tema hablaremos de como recibir los datos en JSON.

Ya sabemos cómo enviar la solicitud al servidor. Para recibir la respuesta se utiliza la propiedad XMLHttpRequest.onreadystatechange para ejecutar una función cuándo XMLHttpRequest.readyState cambia de valor. El valor de readyState que más nos interesa es 4; este valor indica que la solicitud Ajax ha concluido y la respuesta desde el servidor está disponible en XMLHttpRequest.responseText:

// Definimos la URL que vamos a solicitar via Ajax
var ajax_url = "http://mysite.com/json/data.json";

// Definirmos los parámetros que vamos a enviar
var params = "parametro=valor&otro_parametro=otro_valor";

// Añadimos los parámetros a la URL
ajax_url += '?' + params;

// Creamos un nuevo objeto encargado de la comunicación
var ajax_request = new XMLHttpRequest();

// Definimos una función a ejecutar cuándo la solicitud Ajax tiene alguna información
ajax_request.onreadystatechange = function() {

    // readyState es 4
    if (ajax_request.readyState == 4 ) {

        // Analizaos el responseText que contendrá el JSON enviado desde el servidor
        var jsonObj = JSON.parse( ajax_request.responseText );
        // La variable jsonObj ahora contiene un objeto con los datos recibidos

    }
}

// Definimos como queremos realizar la comunicación
ajax_request.open( "GET", ajax_url, true );

//Enviamos la solicitud
ajax_request.send();

Ejemplo con el metodo POST

Hola amigos había dicho que el formato de los datos enviados en la solicitud POST tiene que ser tipo query string (key=valor&key2=valor2) y que se tienen que envíar como un formulario (Content-type: application/x-www-form-urlencoded). Bien, no es cierto.

En realidad podemos hacer un POST con los datos en cualquier formato, por ejemplo en JSON:

// El JSON a enviar
var myjson = '{ "key" : "value", "key1" : "value1", "key2" : "value2" }'
var ajax_request = new XMLHttpRequest();
ajax_request.open( "POST", ajax_url, true );
// Establecer la cabecera Content-Type apropiada
ajax_request.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
// Enviar la solicitud
ajax_request.send( myjson );

Pero PHP seguirá esperando que el cuerpo de la solicitud sea un query string. Al recibir un cuerpo con otro formato, no podremos acceder desde PHP a esos datos en la superglobal $_POST como es habitual. Tendremos que acceder directamente al cuerpo de la solicitud y decodificar el JSON:

/// Obtenemos el json enviado
$data = file_get_contents('php://input');
// Los convertimos en un array
$data = json_decode( $data, true );

Por eso decía que los datos se debían enviar como query string, porque en PHP no tiene mucho “sentido” enviarlos en otros formatos. Sin embargo, puede ser apropiado si en el servidor se utiliza otro lenguaje. Por ejemplo, enviar JSON mediante POST puede ser apropiado para servidores que utilicen Node.js.

Ejemplo con el metodo GET

En el método GET, los parámetros de la solicitud se añaden a la URL como query string, es decir, se añade a la URL una cadena del tipo

param1=value1&param2=value2:

// Definimos la URL que vamos a solicitar via Ajax
var ajax_url = "http://mysite.com/json/data.json";

// Definimos los parámetros que vamos a enviar
var params = "parametro=valor&otro_parametro=otro_valor";

// Añadimos los parámetros a la URL
ajax_url += '?' + params;

// Creamos un nuevo objeto encargado de la comunicación
var ajax_request = new XMLHttpRequest();

// Definimos como queremos realizar la comunicación
ajax_request.open( "GET", ajax_url, true );

//Enviamos la solicitud
ajax_request.send();

Parémonos un momento en el método XMLHttpRequest.open. Este método admite varios parámetros, que son: (os remito a la documentación para más informatión3)

• -método: el método HTTP a utilizar en la solicitud Ajax. GET o POST, en el ejemplo anterior fue GET.
• -url: dirección URL que se va a solicitar, o lo que es lo mismo, la URL a la que se va enviar la solicitud.  
• -async: true (asíncrono) o false (síncrono). Es opcional y el valor por defecto es true. Hay quien recomienda ponerlo siempre por si no se respeta el valor por defecto.

JSON en general

Amigos en el mundo del desarrollo web, mas pronto o mas tarde llega el momento en el que necesitamos gestionar de forma mas ágil y sencilla la información debido al alto numero de datos que tenemos que almacenar, una alternativa mas liviana y fácil de usar que XML es JSON, una sintaxis de envío y recepción de datos en formato de texto que puede ser leído y utilizado como un formato de datos por cualquier lenguaje de programación.

JSON es el acrónimo de Javascript Object Notation, utiliza el código Javascript como modelo de datos y está definido en la tercera edición del estándar de Lenguaje de programación ECMAScript [ECMA], aunque esto no quiere decir que tenga que ir unido necesariamente a Javascript, es evidente que la secillez y simplicidad con la que podemos trabajar en Javascript con JSON ha generado un gran numero de seguidores de esta alternativa.

JSON es un estándar basado en texto plano por lo que puede ser interpretado por cualquier lenguaje de programación y compartir información con otros lenguajes distintos, uno de los ejemplos donde podemos trabajar con JSON es en aplicaciones interactivas que utilicen AJAX, donde será más sencillo el envío y recepción de los datos.





Los Datos

Vamos a ver la sintaxis de JSON, en primer lugar veremos los datos, estos se definen con una pareja de nombre/valor entre comillas dobles, primero se define el nombre y seguido de dos puntos se define el valor, el valor puede ser un dato de varios tipos, un número, una cadena, un booleano, un array, un objeto o un valor null.

"articulo":"cocina"

Los Objetos

Los objetos se escriben entre llaves { } y pueden contener múltiples datos (parejas de nombre/valor) separados por comas.

{"articulo":"cocina", "seccion":"24"}

Los Arrays

Los arrays se escriben entre corchetes [ ] y pueden contener múltiples objetos separados por comas.

[
 {"articulo":"cocina", "seccion":"24"},
 {"articulo":"puerta", "seccion":"19"},
 {"articulo":"campana", "seccion":"18"}
]



"almacen":[
 {"articulo":"cocina", "seccion":"24"},
 {"articulo":"puerta", "seccion":"19"},
 {"articulo":"campana", "seccion":"18"}
]

En Javascript

De momento es suficiente teoria para comenzar a practicar, que es como se aprende en programación, ¡programando!, asi que vamos a implementar el uso de este tipo de sintaxis mediante código Javascript, utilizando una sintaxis muy parecida a la del ejemplo anterior

<div id="exist"></div>
<script>
 var almacen = [
 {
 "articulo":"cocina",
 "seccion":"24"
  }, 
 {
 "articulo":"puerta",
 "seccion":"19"
 },
 {
 "articulo":"campana",
 "seccion":"18"
 },
];
document.getElementById("exist").innerHTML = "Articulo: " +
almacen[0].articulo + " - " + "Seccion: " + almacen[0].seccion;
</script>


document.getElementById("exist").innerHTML = "Articulo: " +
almacen[0]["articulo"] + " - " + "Seccion: " + almacen[0]["seccion"];

Con jQuery

Como ya he dicho en varias ocasiones en este articulo, JSON es el mejor formato con el que podemos trabajar para enviar y recibir datos si estamos utilizando AJAX, si en Javascript nos puede resultar relativamente sencillo acceder a los datos por este medio, el framework de jQuery nos facilita todavía mas esta tarea con el método getJSON().

Utilizamos de nuevo el mismo archivo JSON para acceder con jQuery.

No olvides inculir el CDN de jQuery en el HEAD

<div id="exist"></div>
<script>
 $.getJSON('pruebadatos.json', function(data) {
  var output="";
  for (var i in data) {
   output+="Articulo: " + data[i].articulo + " - Seccion: " + data[i].seccion + "<br>";
  }
  document.getElementById("exist").innerHTML=output;
 });
</script>