Skip to main content
6 de 9
se añadieron 115 caracteres en el cuerpo
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

Asumo que el lector tiene unos conocimientos básicos de Javascript:

//así declaramos un objeto básico en Javascript
let objeto={ atributo: 'valor'}

No son lo mismo

JSON es el acrónimo de JavaScript Object Notation, es un formato de texto ligero para el intercambio de datos. ¿Qué quiere decir ésto? Bueno, si vemos el siguiente texto

<lista-nodos>
  <nodo id="1">texto1</nodo>
  <nodo id="3">texto2</nodo>
  <nodo id="5">texto1</nodo>
</lista-nodos>

Todo programador tiene claro que eso es un texto en formato XML. Pues bien, JSON no es más que un formato distinto pero con la misma función. El equivalente a ese XML podría ser algo como:

[
  { "id": "1", "valor": "texto1"},
  { "id": "3", "valor": "texto2"},
  { "id": "5", "valor": "texto1"}
]

Como su propio nombre indica, esta notación es similar a la que usaríamos en Javascript para crear un objeto:

const datos=[
  { id: "1", valor: "texto1"},
  { id: "3", valor: "texto2"},
  { id: "5", valor: "texto1"}
];

datos.forEach(dato=> console.log('elemento:',dato.id,dato.valor))

Pero un JSON es, y aquí me estoy repitiendo, texto:

//esto es un texto en formato JSON
const datosJson=`[
  { "id": "1", "valor": "texto1"},
  { "id": "3", "valor": "texto2"},
  { "id": "5", "valor": "texto1"}
]`;

console.log(datosJson);

El formato JSON es algo más restrictivo de lo que sería el código Javascript:

  • Todos los valores de tipo string deben ir entre comillas dobles, las comillas simples no están permitidas.
  • Del mismo modo, todas las claves (los nombres de los atributos) deben ir entre comillas dobles.
  • No admite ningún tipo de comentarios (a diferencia de XML, donde podemos usar <!-- Comentarios-->)
  • Los valores numéricos han de estar en base decimal, no admite ceros a la izquierda (que pudieran pensar que el número está en base octal).
  • No se admiten valores undefined.

Y, ¿cómo transformamos el texto en un objeto manipulable? ¿Y cómo hacemos la operación inversa?

Usando las siguientes funciones:

  • JSON.parse(<texto>) nos devuelve un objeto creado a partir de un string que esté en formato JSON.
  • JSON.stringify(obj) nos devuelve un string en formato JSON con los atributos del objeto obj. Si obj tiene atributos que sean funciones, serán ignorados.

//texto con formato inválido
const datosJson=`[
  { "id": "1", valor: "texto1"},
  { "id": "3", valor: "texto2"},
]`;
try {
  const datos=JSON.parse(datosJson);
} catch(error) {
  console.log('Falla porque las claves valor no está entre comillas')
}
const datosJson2=`[
  { "id": 1, "valor": "texto1"},
  { "id": 3, "valor": "texto2"},
  { "id": 5, "valor": "texto1"}
]`;
//transformamos a objeto
const d=JSON.parse(datosJson2);
console.log(d[0].id);

//añadimos un elemento
d.push({id:4,valor:'otro texto'});

//transformamos el objeto de nuevo a JSON
console.log(JSON.stringify(d));

Por tanto, aunque JSON tenga como origen el lenguaje Javascript, no es más que una forma de enviar datos entre aplicaciones, que no necesariamente estarán implementadas con Javascript: cualquier lenguaje de programación puede procesar un JSON (al igual que un XML) para obtener la información necesaria.

Dos ejemplos cotidianos del uso de JSON son:

  • AJAX: Cuando mandamos o recibimos datos desde un servidor, la información se suele mandar como texto plano, no podemos mandar un objeto como datos binarios si el lenguaje que los recibe no va a saber interpretarlos (muchas veces, al pedir recursos a un API de terceros, no sabemos siquiera qué lenguaje de programación se usó).
  • Web Storage: Cuando queremos guardar datos en el navegador del usuario, usando el localStorage o el sessionStorage, los métodos setItem y getItem sólo trabajan con el tipo string, con lo que es necesario transformar los objetos que queremos guardar a texto.
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92