JSON JavaScript Ejemplo Función JSON.parse

¿Que es JSON JavaScript?

Primero que todo debemos tener bien en cuenta que es JSON, partiendo de que estamos haciendo referencia a un acrónimo o siglas que significan:

JavaScript Object Notation

¿Para que se utiliza JSON?

Se utiliza para realizar intercambio de datos en aplicaciones Web y móviles, es ligero e independiente del lenguaje en que esté escrita la aplicación, entre sus características encontramos que es auto-descriptivo y fácil de escribir y entender.

¿Por que utilizar JSON?

Debido a la sintaxis que maneja JavaScript con respecto a la gestión de objetos hace que sea totalmente compatible con JSON haciendo uso de las funciones que normalmente utilizamos para manipular Objetos con el fin de convertir los datos recibidos por JSON en objetos JavaScript Nativos.

Uso básico

<script>

var cadena = '{"nombre":"Ivan","direccion":"Avenida 123","telefono":"3125555555"}';
var objeto = JSON.parse(cadena);
console.log(objeto.nombre +" " +objeto.direccion +" "+objeto.telefono);

</script>

Al momento de imprimir la salida con console.log() Obtendríamos:

Ivan Avenida 123 312555555

Si nos damos cuenta es bastante similar al manejo de objetos en JavaScript y mediante el método JSON.parse() podemos hacer la conversión.

Diferencia entre la estructura de JSON y Objetos JavaScript:

Podemos observar la diferencia en las estructuras imprimiendo ambas variables veamos:

JSON:

{"nombre":"Ivan","direccion":"Avenida 123","telefono":"3125555555"}

Objeto JavaScript

Object {nombre: "Ivan", direccion: "Avenida 123", telefono: "3125555555"}
direccion:"Avenida 123"
nombre:"Ivan"
telefono:"3125555555"
__proto__:Object

Manejando cadenas con multiples registros

Teniendo esta cadena en la cual existen dos registros:

var estudiantes = '[{"nombre": "Jose", "apellidos": "Castro", "direccion": "Avenida 123"},{"nombre": "Maria", "apellidos": "Diaz", "direccion": "Calle 23"}]';

Podemos obtener los valores por separado al convertirla con JavaScript a Objeto:

<script>

var estudiantes = '[{"nombre": "Jose", "apellidos": "Castro", "direccion": "Avenida 123"},{"nombre": "Maria", "apellidos": "Diaz", "direccion": "Calle 23"}]';
var objeto = JSON.parse(estudiantes);
console.log(objeto[0])
console.log(objeto[1])
</script>

Tendríamos como salida:

Object {nombre: "Jose", apellidos: "Castro", direccion: "Avenida 123"}

Object {nombre: "Maria", apellidos: "Diaz", direccion: "Calle 23"}

Así mismo podemos referenciar los valores de cada Objeto por separado:

<script>

var estudiantes = '[{"nombre": "Jose", "apellidos": "Castro", "direccion": "Avenida 123"},{"nombre": "Maria", "apellidos": "Diaz", "direccion": "Calle 23"}]';
var objeto = JSON.parse(estudiantes);

console.log("Dato de Estudiante 1:")
console.log(objeto[0].nombre)
console.log(objeto[0].apellidos)
console.log(objeto[0].direccion)

console.log("Dato de Estudiante 2:")
console.log(objeto[1].nombre)
console.log(objeto[1].apellidos)
console.log(objeto[1].direccion)

</script>

Si probamos el código anterior obtenemos como salida los datos por separado, permitiéndonos de esta forma ubicarlos en cualquier lugar de nuestra aplicación.

Datos de Estudiante 1:
Jose
Castro
Avenida 123
Datos de Estudiante 2:
Maria
Diaz
Calle 23

¿Pero que pasa si son muchos datos?

Si el panorama es que estamos recibiendo muchos datos hay que recordar que podemos utilizar las funciones de JavaScript para la manipulación de Objetos y realizar iteraciones para obtener los datos así:

<script>

var estudiantes = '[{"nombre": "Jose", "apellidos": "Castro", "direccion": "Avenida 123"},{"nombre": "Maria", "apellidos": "Diaz", "direccion": "Calle 23"}]';
var objeto = JSON.parse(estudiantes);

for (var i = 0; i < objeto.length; i++) {
 console.log("Datos del estudiante "+(i+1));
 console.log("Nombre: "+objeto[i].nombre);
 console.log("Apellido: "+objeto[i].apellidos);
 console.log("Dirección: "+objeto[i].direccion);
}

</script>

De esta forma obtenemos el mismo resultado que en el código anterior, si nos fijamos mediante objeto.length recorremos el objeto según la cantidad de registros que contenga (para este caso 2).

En próximos artículos seguiremos profundizando en el manejo de JSON en JavaScript