16 Octubre 2015 clcanela
1791 5

Tutorial: Cómo leer un JSON con jQuery


1791 5

En éste video tutorial explico un poco la mecánica para leer un JSON, leer sus contenidos e iterar sobre sus elementos.

Aunque en principio es un poco básico lo que cubro en el video, intento explicar cómo es que podemos consumir un recurso JSON en nuestro sitio web mediante el uso de jQuery, también explico cómo es que podemos recibir más de un objeto en la respuesta de JSON y la forma en que podemos ya sea iterar sobre todos los elementos recibidos o usar directamente la información de uno o varios de los elementos recibidos.

Ejercicio en JSFiddle: http://jsfiddle.net/clcanela/vLft56mg/

Éste es nuestro primer tutorial, así que se reciben críticas, consejos y mentadas, según corresponda.

¡Felices sentencias!

Quizá te interesen
Cómo obtener los parámetros de la URL vía JavaScript o jQuery
¿Qué es JSON, para qué sirve y dónde se usa?
Cómo diferenciar entre un evento por usuario o programático
Recibirás notificaciones de las respuestas a tu comentario y obtendrémos tu avatar de Gravatar.com Tu correo no será publicado

sscalvocrap3 Octubre 2016

El ejemplo de JSFIddle no me está funcionando y creo que puede ser por que el JSON se sirve a través de una URL no segura (no https):
http://materiales.canela.me/json_jq...
Por favor, ¿podrías confirmarmelo?
Muchas gracias
Paco

Recibirás notificaciones de las respuestas a tu comentario y obtendrémos tu avatar de Gravatar.com Tu correo no será publicado

sscrap3 Octubre 2016

Aha.. mi problema era que,por alguna razón, yo había hecho la solicitud asi:
https://jsfiddle.net/nhefthws/
y entonces jsfiddle esperaba que todos los demás recursos fueran llamados a través de https
Al darme cuenta, he invocado el ejemplo solo con
http://jsfiddle.net/nhefthws/
y si que me funciona..
Muchas gracias!

Recibirás notificaciones de las respuestas a tu comentario y obtendrémos tu avatar de Gravatar.com Tu correo no será publicado

clcanela3 Octubre 2016

Paco, gracias por hacerme notar ese detalle, la verdad es que desde que hice el tutorial se han implementado algunos estándares de seguridad que antes no eran tan estrictos pero ahora sí hay que prestar atención a no mezclar contenido desde https con otro desde simple http.
Ya corregí el link del ejemplo para que se muestre por http plano.
¡Saludos!

Recibirás notificaciones de las respuestas a tu comentario y obtendrémos tu avatar de Gravatar.com Tu correo no será publicado

iQonde14 Marzo 2017

Hola, yo tengo una duda, porqué en algunos json agregan los corchetes [] al inicio del objeto y algunos no ??
Saludos.

Recibirás notificaciones de las respuestas a tu comentario y obtendrémos tu avatar de Gravatar.com Tu correo no será publicado

clcanela29 Marzo 2017

Hola, eso normalmente se usa para indicar un arreglo de objetos, por lo regular sirve cuando quieres enviar más de un objeto en tu respuesta, de hecho la diferencia más notable es que los corchetes "[ ]" indican agrupación (colección, arreglo, etc.) mientras que las llaves "{ }" indican que es un objeto. De hecho cuando se envía un arreglo de objetos JSON se debe de enviar objetos dentro de corchetes separados por coma, algo así:

[
{obj:1},
{obj:2},
{obj:3},
]

Saludos

Recibirás notificaciones de las respuestas a tu comentario y obtendrémos tu avatar de Gravatar.com Tu correo no será publicado