JSON

JavaScript Object Notation - JSON esta diseñado para almacenamiento e intercambiar datos entre lenguajes. La sintaxis define una serie de objetos para representar los datos.

{obj:[
   {prop1:val1},
   {prop2:val2},
   {prop3:val3}
]}
var x = JSON.parse(obj);

JSON esta implementado en ES5 (2009) así que funciona en: Chrome 23 + Firefox 21 + Safari 6+ + Opera 15 + IE 10.

• JSON.parse()
• JSON.stringify
• JSON en PHP

1. JSON.parse()

Analiza los datos JSON y los convierten en un objeto JavaScript.

var obj = JSON.parse("pares clave:valor");

Uso del objeto JavaScript en HTML

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

Si recibe datos en formato JSON desde servidor, puede convertirlos en un objeto JavaScript:

var myJSON = '{"name":"John", "age":31, "city":"New York"}';
var myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;

Para solicitar datos JSON del servidor.

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

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

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

Los objetos de fecha no están permitidos en JSON. Si necesita incluir una fecha, escríbala como una cadena. Puede volver a convertirlo en un objeto de fecha más tarde:

var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);

document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

2. JSON.stringify

Convierta un objeto o matriz JavaScript en una cadena.

var cadena = JSON.stringify(obj);
var cadena = JSON.stringify(matriz);

Si tiene datos almacenados en un objeto JavaScript, puede convertir el objeto en JSON y enviarlo a un servidor:

var myObj = {name: "John", age: 31, city: "New York"};
var myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
//o escribir en elemento HTML id=demo:
document.getElementById("demo").innerHTML = myJSON;

Convertir una matriz de JavaScript en objeto JSON y escribirla en un elemento con id=demo de HTML.

var arr = [ "John", "Peter", "Sally", "Jane" ];
var myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;

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

var obj = { name: "John", today: new Date(), city : "New York" };
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

En JSON, las funciones no están permitidas como valores de objeto. El metodo JSON.stringify() eliminará cualquier función de un objeto JavaScript, tanto la clave como el valor.

var obj = { name: "John", age: function () {return 30;}, city: "New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

3. JSON en PHP

Un uso común de JSON es leer datos de un servidor web y mostrarlos en una página web. Aqui mostratmos como intermbiar datos entre un servidor Apache (PHP) y el cliente (JavaScript).

Archivo con objeto PHP.

<?php
$myObj->name = 'John';
$myObj->age = 30;
$myObj->city = 'New York';
$myJSON = json_encode($myObj);
echo $myJSON;
?>

Cliente JavaScript

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

Archivo con matriz PHP.

<?php
$myArr = array('John', 'Mary', 'Peter', 'Sally');
$myJSON = json_encode($myArr);
echo $myJSON;
?>

Cliente JavaScript

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    document.getElementById("demo").innerHTML = myObj[2];
  }
};
xmlhttp.open('GET', 'demo_file_array.php', true);
xmlhttp.send();