¿Qué es JSON y por qué debería utilizarlo?

He mirado en wikipedia y lo he buscado en Google y he leído la documentación oficial, pero todavía no he llegado al punto de entender realmente qué es JSON y por qué lo utilizaría.

He estado construyendo aplicaciones con PHP, MySQL y Javascript / HTML durante un tiempo, y si JSON puede hacer algo para hacer mi vida más fácil o mi código mejor o mi interfaz de usuario mejor, entonces me gustaría saberlo. ¿Puede alguien darme una explicación sucinta?

Solución

JSON (JavaScript Object Notation) es un formato ligero que se utiliza para el intercambio de datos. Se basa en un subconjunto del lenguaje JavaScript (la forma en que se construyen los objetos en JavaScript). Como se indica en el MDN]1, algunos JavaScript no son JSON, y algunos JSON no son JavaScript. Un ejemplo de esto son las respuestas de los servicios web. En los 'viejos' días, los servicios web usaban XML como su formato de datos principal para transmitir datos de vuelta, pero desde que apareció JSON (El formato JSON está especificado en RFC 4627 por Douglas Crockford), ha sido el formato preferido porque es mucho más ligero. Puedes encontrar mucha más información en la página oficial de JSON. JSON se basa en dos estructuras:

  • Una colección de pares nombre/valor. En varios lenguajes, esto se realiza como un objeto, un registro, una estructura, un diccionario, una tabla hash, una lista con claves o una matriz asociativa.
  • Una lista ordenada de valores. En la mayoría de los lenguajes, se realiza como una matriz, un vector, una lista o una secuencia.

    Estructura JSON













    Este es un ejemplo de datos JSON:

{
     "firstName": "John",
     "lastName": "Smith",
     "address": {
         "streetAddress": "21 2nd Street",
         "city": "New York",
         "state": "NY",
         "postalCode": 10021
     },
     "phoneNumbers": [
         "212 555-1234",
         "646 555-4567"
     ]
 }

JSON en JavaScript

¡JSON (en Javascript) es una cadena! La gente suele asumir que todos los objetos de Javascript son JSON y que JSON es un objeto de Javascript. Esto es incorrecto. En Javascript var x = {x:y} es no JSON, es un objeto Javascript. Los dos no son la misma cosa. El equivalente en JSON (representado en el lenguaje Javascript) sería var x = '{"x":"y"}'. x es un objeto de tipo cadena** no un objeto por derecho propio. Para convertir esto en un objeto Javascript de pleno derecho primero debes parsearlo, var x = JSON.parse('{"x":"y"}');, x es ahora un objeto pero ya no es JSON. Ver Javascript object Vs JSON

Cuando se trabaja con JSON y JavaScript, se puede tener la tentación de utilizar la función eval para evaluar el resultado devuelto en la devolución de llamada, pero esto no se sugiere ya que hay dos caracteres (U+2028 & U+2029) válidos en JSON pero no en JavaScript (leer más de esto aquí). Por lo tanto, siempre hay que intentar utilizar el script de Crockford's que comprueba si el JSON es válido antes de evaluarlo. El enlace a la explicación del script se encuentra aquí y aquí hay un enlace directo al archivo js. Cada uno de los principales navegadores de hoy en día tiene su propia implementación para esto. Ejemplo de cómo utilizar el analizador JSON (con el json del fragmento de código anterior):

//The callback function that will be executed once data is received from the server
var callback = function (result) {
    var johnny = JSON.parse(result);
    //Now, the variable 'johnny' is an object that contains all of the properties 
    //from the above code snippet (the json example)
    alert(johnny.firstName + ' ' + johnny.lastName); //Will alert 'John Smith'
};

El analizador JSON también ofrece otro método muy útil, stringify. Este método acepta un objeto JavaScript como parámetro, y devuelve una cadena con formato JSON. Esto es útil para cuando quieres enviar datos al servidor:

var anObject = {name: "Andreas", surname : "Grech", age : 20};
var jsonFormat = JSON.stringify(anObject);
//The above method will output this: {"name":"Andreas","surname":"Grech","age":20}

Los dos métodos anteriores (parse y stringify) también toman un segundo parámetro, que es una función que será llamada para cada clave y valor en cada nivel del resultado final, y cada valor será reemplazado por el resultado de su función introducida. (Más sobre esto aquí) Por cierto, para todos los que piensan que JSON es sólo para JavaScript, echa un vistazo a este post que explica y confirma lo contrario.

Referencias

Comentarios (9)

JSON es la notación de objetos de JavaScript. Es una forma mucho más compacta de transmitir conjuntos de datos a través de conexiones de red en comparación con XML. Sugiero que se utilice JSON en cualquier aplicación de tipo AJAX en la que XML sería la opción "recomendada". La verbosidad de XML aumentará el tiempo de descarga y el consumo de ancho de banda ($$$). Se puede lograr el mismo efecto con JSON y su marcado se dedica casi exclusivamente a los datos en sí y no a la estructura subyacente.

Comentarios (0)

la respuesta corta común es: si estás usando AJAX para hacer peticiones de datos, puedes enviar y devolver fácilmente objetos como cadenas JSON. Las extensiones disponibles para Javascript soportan llamadas aJSON() en todos los tipos de javascript para enviar datos al servidor en una petición AJAX. Las respuestas AJAX pueden devolver objetos como cadenas JSON que pueden convertirse en objetos Javascript mediante una simple llamada eval, por ejemplo, si la función AJAX someAjaxFunctionCallReturningJson devuelve

"{ \"FirstName\" : \"Fred\", \"LastName\" : \"Flintstone\" }"

se podría escribir en Javascript

var obj = eval("(" + someAjaxFunctionCallReturningJson().value + ")");
alert(obj.FirstName);
alert(obj.LastName);

JSON también se puede utilizar para cargas útiles de servicios web, etc., pero es realmente conveniente para los resultados de AJAX.

  • Actualización (diez años después): No hagas esto, usa JSON.parse
Comentarios (2)