¿Qué diablos es JSON? | Ejemplo práctico en #javascript
Summary
TLDREn este video, Héctor de León presenta un tutorial sobre JSON, un formato de datos orientado a objetos que facilita la intercambio de información entre diferentes tecnologías y lenguajes de programación. Expone que JSON no es solo para JavaScript, sino que es compatible con muchos otros lenguajes como Python y PHP. Detalla cómo JSON representa datos estructurados y cómo se puede convertir fácilmente entre objetos y cadenas de texto. Además, ilustra cómo hacer solicitudes a un servicio web utilizando JSON y cómo manejar respuestas en JavaScript, utilizando ejemplos prácticos y sencillos para que los principiantes puedan entender y aplicar JSON en sus proyectos de programación.
Takeaways
- 👋 Héctor de León presenta un video para personas nuevas en programación sobre JSON.
- 🌐 JSON no es un lenguaje de programación sino un formato para organizar y transferir datos.
- 🔄 JSON puede ser utilizado por diferentes tecnologías y no está limitado a la web o JavaScript.
- 📚 JSON es una alternativa a XML, más fácil de escribir y menos complejo.
- 📝 JSON utiliza una estructura de llaves y valores para representar objetos y atributos.
- 📈 Puedes representar tipos de datos como números, cadenas, arreglos y objetos anidados en JSON.
- 🔑 JSON se utiliza para empaquetar datos y enviarlos a través de la red o entre aplicaciones.
- 🛠️ Existen métodos en JavaScript y otros lenguajes para convertir JSON a objetos y viceversa.
- 🌐 JSON es compatible con múltiples lenguajes de programación como Python, PHP, etc.
- 🔗 Ejemplos como JSONPlaceholder muestran cómo solicitar datos JSON de un servicio web.
- 🔧 La utilidad de JSON radica en su capacidad para ser un formato de intercambio de datos universal.
Q & A
¿Qué es Jason y cómo está relacionado con JavaScript?
-Jason es un formato para organizar datos, no un lenguaje de programación. Aunque el nombre incluye 'JavaScript', no está solo orientado a JavaScript. Es un formato que puede ser utilizado por diferentes tecnologías y lenguajes de programación.
¿Para qué se utiliza Jason y cómo se diferencia de XML?
-Jason se utiliza para expresar datos con una estructura definida y sencillo. Es una alternativa a XML y ha ganado popularidad últimamente porque es más fácil de escribir que XML.
¿Qué tipos de datos puedo representar en Jason?
-En Jason puedes representar cadenas, números, números reales, booleanos, arreglos, objetos y también puedes expresar valores nulos.
¿Cómo se representa un objeto en Jason?
-Un objeto en Jason se representa utilizando llaves. Dentro de las llaves, se especifican los atributos (llaves) y sus valores, separados por dos puntos y cada atributo se separa de otro con una coma.
¿Cómo se representa un arreglo en Jason?
-Un arreglo en Jason se representa con corchetes y los valores dentro del arreglo se separan por comas.
¿Cómo se puede hacer una solicitud a un web service utilizando Jason en JavaScript?
-Para hacer una solicitud a un web service utilizando Jason en JavaScript, se puede utilizar la función 'fetch', que es una solicitud asíncrona que devuelve una promesa. La respuesta se recibe como texto y luego se puede convertir a un objeto utilizando 'JSON.parse'.
¿Qué es JSON.parse y cómo se utiliza?
-JSON.parse es un método en JavaScript que convierte una cadena de texto en formato JSON en un objeto JavaScript. Se utiliza para analizar una cadena JSON y convertirla en un objeto que luego se puede manipular en el código.
¿Qué es un web service y cómo se relaciona con Jason?
-Un web service es un sistema que permite a diferentes aplicaciones interactuar a través de internet, utilizando un formato estándar para la comunicación, como JSON. Jason se utiliza para empaquetar y transferir datos entre el cliente y el web service.
¿Cómo se puede simular un web service utilizando Jason?
-Se puede simular un web service utilizando herramientas como 'JSONPlaceholder', que es un servicio que devuelve datos JSON de ejemplo para propósitos de prueba y desarrollo.
¿Por qué es útil Jason en el ámbito de la programación y la comunicación entre sistemas?
-Jason es útil porque proporciona un formato estándar y sencillo para la transferencia de datos entre diferentes sistemas y lenguajes de programación. Facilita la comunicación y la integración de aplicaciones.
¿Qué es una promesa en JavaScript y cómo se relaciona con las solicitudes a web services?
-Una promesa en JavaScript es un objeto que representa el resultado final de una operación asíncrona. Cuando se hace una solicitud a un web service, la respuesta se maneja a través de una promesa, lo que permite trabajar con la respuesta una vez que esté disponible, sin bloquear la ejecución del programa.
Outlines
💻 Introducción a JSON y su uso en programación
El primer párrafo presenta a Héctor De León, quien inicia un video educativo destinado a personas nuevas en la programación. Él muestra una página web y explica que trabajarán con JSON (JavaScript Object Notation), un formato de datos que no está limitado a JavaScript y puede ser utilizado en diferentes tecnologías. JSON es una alternativa a XML y es más fácil de escribir. Se describe cómo JSON organiza datos en una estructura sencilla utilizando llaves, valores y comas, y cómo estos datos pueden representar diferentes tipos como números, cadenas, arreglos y objetos anidados. Además, se menciona que JSON es útil para la intercambio de datos entre tecnologías y se da un ejemplo práctico de cómo se puede manipular en un navegador utilizando la consola de Chrome.
🔗 Comunicación y representación de datos con JSON
En el segundo párrafo, se profundiza en la habilidad de JSON para representar objetos y cómo estos pueden ser transmitidos a través de la red. Se ilustra cómo JSON puede ser enviado a través de una aplicación o una consola, y cómo cualquier objeto en diferentes lenguajes de programación puede ser convertido a una cadena JSON y luego ser analizado y convertido de nuevo en objetos por la tecnología receptora. Se menciona el uso de métodos como 'JSON.parse' para la deserialización de JSON a objetos en JavaScript y se da un ejemplo de cómo se puede interactuar con un servicio web que devuelve datos en formato JSON. También se hace referencia a JSONPlaceholder, un servicio que simula un servidor para fines de prueba.
📚 Aprendizaje y aplicación práctica de JSON
El tercer párrafo continúa con la temática de la comunicación asíncrona y la manipulación de JSON en JavaScript. Se presenta un ejemplo de cómo hacer una solicitud AJAX utilizando la función 'fetch', que devuelve una promesa. Se describe el proceso de recibir una respuesta en formato JSON, convertirla a texto y luego deserializarla a un objeto utilizando 'JSON.parse'. Se ilustra cómo se puede acceder a los datos de un objeto JSON y se menciona el uso de 'console.log' para imprimir información específica. El video concluye con una reflexión sobre la utilidad de JSON como un formato para la transferencia de datos y se invita a los espectadores a dejar comentarios sobre si les gustaría más contenido similar o tutoriales sobre promesas. Finalmente, Héctor De León agradece y pide compartir el video si es útil para otros.
Mindmap
Keywords
💡Programación
💡JSON
💡Navegador
💡API
💡Objeto
💡Atributos
💡Tipos de datos
💡Arreglos
💡Web Service
💡Promesas
Highlights
Héctor de León presenta un video para personas nuevas en la programación.
Se discute que Jason es un formato para organizar datos y no un lenguaje de programación.
Jason puede ser utilizado en diferentes tecnologías, no solo en la web.
Se compara Jason con XML, señalando que Jason es más fácil de escribir.
Se explica cómo Jason utiliza llaves y valores para representar objetos y atributos.
Se muestra cómo se pueden representar diferentes tipos de datos en Jason, como números y cadenas.
Se ejemplifica la representación de arreglos y objetos anidados en Jason.
Se menciona que Jason puede representar valores nulos.
Se destaca que Jason es compatible con varios lenguajes de programación, incluidos Python y PHP.
Se describe cómo enviar objetos en Jason a través de la red y su recepción en diferentes tecnologías.
Se ilustra la deserialización de Jason a objetos en JavaScript utilizando 'JSON.parse'.
Se presenta JSONPlaceholder como un ejemplo de un servicio web que devuelve datos en Jason.
Se hace una demostración de cómo hacer una solicitud a un servicio web y recibir una respuesta en Jason.
Se explica cómo se puede trabajar con Jason en JavaScript sin necesidad de un editor, utilizando el navegador.
Se menciona la importancia de Jason como un formato de empaquetado de datos para la transferencia entre aplicaciones y lenguajes.
Se invita a los espectadores a dejar comentarios y compartir el video si les resultó útil.
Transcripts
qué tal mi nombre es héctor de león este
es un video en donde hablaremos qué
diablos es jason este vídeo está
orientado sobre todo a las personas que
son nuevas en el ámbito de programación
yo aquí tengo una página a una donde
tengo en mi pantalla un navegador tiene
mi página internet del a un punto net no
es porque de publicitando mi página sino
porque vamos a trabajar con jason y para
trabajar con jason puedes hacerlo con un
navegador ni siquiera necesitas instalar
nada ni nada de eso bien
jason en sí y qué significa jason es
javascript y explotation pero no porque
diga javascript quiere decir que
solamente está orientado javascript
jason en sí es un formato para para
organizar datos y estos datos puedan ser
transferidos es decir este este conjunto
de datos que al final de cuentas es un
objeto pueda ser intercambiado entre
tecnologías diferentes no necesariamente
jeanson tiene que ser intercambiado por
vía web o solicitudes ya jason ahorita
puede ser intercambiado hasta por
medio de una pino porque sea un api
quiere decir que tenga internet un api
puede ser hasta la piel carnal de linux
por ejemplo
en sí jason para qué sirve no es un
lenguaje de programación
jason es un formato para expresar datos
con una estructura definida sencilla y
son sirve bastante viene para ser una
alternativa xml pero ha tenido más auge
últimamente porque el jason es más fácil
de escribir para mí es más fácil y dicen
muchos que es eso porque a escribir una
xml como que es más complejo como cuando
estás escribiendo como programador a
escribir una llavecita serra llavecitas
etcétera creo que vamos de la mano a los
lenguajes de programación bien el jason
cómo funciona o cómo puedes especificar
lo por ejemplo de esto te estoy diciendo
en el navegador podemos hacerlo pues muy
fácil como la palabra j del jason de
javascript
podemos contra el chip y en el navegador
chrome abro la consola hay un mensaje
que no me tiene
vamos a hacer aquí unos truquitos vamos
a hacer unos
los ejercicios de un poquito más en la
letra bien
como les dije al inicio jayson sirve
para para plantear para escribir para
representar un objeto un objeto tiene
atributos estos atributos tienen tipos
en jason tu puede representar los tipos
que sean tu puede representar los tipos
números las cadenas los números reales
puede representar los volea nos puede
representar los arreglos y puede
representar objetos dentro de objetos y
tú me dirás y las fechas que onda puso
una fecha la puede representar como una
cadena y entonces no hay impedimento
entonces aquí vamos a hacer como cómo
funciona el jameson para representar un
jason funcionar por medio d
una llave y una llave de apertura y una
llave de cerradura esto especifica que
es un objeto bien yo sí quiero
especificar aquí dentro de este objeto
valores atributos tengo que ponerle
comillas y estos atributos web le pongo
el nombre que yo quiera por ejemplo name
pero
este 6
20 entonces para mí esto ya es un objeto
quiero representar
un número o ponerle aquí género
no puedo ponerle uno o dos si ella sería
una representación obviamente aquí uno
podría ser femenino dos masculino
etcétera
por representar arreglos los arreglos
por representar así mira hijos
dos puntos se fijan cada tributo tiene
el nombre con comillas su valor separado
estos dos puntos sería como el igual
esto equivale a esto bien este es el
nombre del atributo y este es el valor
del atributo lo separamos por coma cada
tributo bien ahora hijos como representa
un arreglo así con los corchetes y como
representan los valores pues aquí dentro
puedo representar los si son solamente
en nombres voy a especificar los
separados por coma
por ejemplo aquí puedan maría
gloria cetera no entonces esto ya es un
arreglo
puedo poner también dentro de este
jayson otro jason otro objeto
internamente aquí puedo ponerle por
ejemplo vamos a poner
a domicilio vamos a poner domicilio
vamos a darle un entero domicilio y el
domicilio va a ser otro objeto que ya he
puesto la llave abajo va a ser otro
objeto entonces este objeto va a tener
calle no sé
avenida feliz
siguiente atributo número
y le ponemos un número que sea bien se
fijan que jason puede representar
cadenas puede representar números
podemos representar también medianos por
ejemplo aquí puede verle por esos
triunfos etcétera y también puede
presentar valores nudos
yo puedo poner la palabra nula bien
entonces con jason tú puede representar
cualquier objeto y una vez que
representas cualquier objeto puedes este
objeto lo puedes mandar a través de la
red a través de una app y a través de
consola
este objetivo puede mandar no te importa
y al final la tecnología las cosas las
mandas si éste siempre y cuando esta
tecnología dice yo acepto un objeto y
jason
y pues recuerden en si ya hizo un ace
para javascript pero hoy en día ya
cualquier lenguaje de programación tú
puedes y es compatible es decir
conciliar python php etcétera etcétera
entonces cuando tú vas a mandar un
objeto en cualquier lenguaje de
programación
su objeto no vas a hacer realizar cuando
las las realizaciones transformarlo en
una cadena o una cadena de bytes o en
este caso en un jason tú tu objeto lo
puedes realizar y al final tendrías algo
como esto que he escrito
cuando tú mandas tu objeto oa una
aplicación digamos una solicitud web a
un web service no basta se realizara
jason y el web service lo va a de se
realizar a un objeto de la tecnología
que esté utilizando
supongamos estás utilizando su ser va a
ser una solicitud a un web service no te
importa en qué está hecho el service to
aman tu vas a mandar un jason el jason
lo recibe el web service y la mejor web
service tyson python entonces python lo
que va a ser de ser y analizarlo y
convertirlo en objeto de pailón bien
entonces aquí ya tenemos un objeto de
jason yoshiyama script quisiera
convertir esto a un objeto es decir debe
realizarlo ya que esto es la
serialización de un objeto tendría que
hacer lo siguiente tengo que ponerlo en
cadena
aquí solamente voy a ponerlo todo en una
línea
si no no va a ganar
nada más aquí se convierte o voy a
ponerlo todo en la línea
y en javascript como en todos los
lenguajes de programación más utilizados
existen ya a clases objetos métodos
etcétera que te conviertan está esta
cadena que está en jason pero final es
una cadena de texto se fijan que la
convierte al objeto sin mucho sin mucho
enrollo miren hay algo llamado jason
punto y tiene un start objeto llamado
jason tiene un método llamado parts
y estos momentos dentro de esta función
llamada parts y esto se lo puedo asignar
a un objeto digamos un objeto llamado
persona esto es igual a todo esto vamos
aquí a darle enter y vamos a decirle
aunque hay personas punto
se fijan
a domicilio
y me trae el domicilio que es un objeto
o si hago aquí con su punto la persona
a esta edición que yo he metido miren
con todos los datos que ha metido bien
se fijan como yo a partir de una cadena
jason he convertido un objeto en
javascript esto lo pueden hacer con
cualquier lenguaje de programación
obviamente en cada lenguaje de
programación tienen sus propios métodos
no se van a llamar como aquí jason punto
parte aquí ya ves que se llama así ahora
esto para que me que diablos me sirve o
para qué me sirve bien hay un sitio
llamado jason place holder que simula
web service y este web service miren lo
que me va a obtener cuando doy una
solicitud digamos tipo
esta que dice aquí
post le doy a abrir y qué es esto estos
son jason miren es un arreglo
tiene corchete que tiene un objeto que
tiene muchos objetos objetos del mismo
tipo que tiene
el body de tyrol body y así y hasta que
se cierra el arreglo son 100 se supone
que son 100 porque en la página decía
antes lo mejor no leyeron se desperdicia
los arreglos de cada objeto se para por
una coma bien ahora
yo quiero solicitar esto es un ejemplo
de un web service yo quisiera hacer una
solicitud de este web service bien me
dice que ejecutando esta url de
javascript
me regresaría este jason vamos a hacer
la prueba
y para este ejemplo vamos a hacer una
solicitud fecha fíjense yo no ni
siquiera se ha utilizado un editor nada
estoy utilizando navegador para hacer
solicitudes face es una solicitud
asíncrona que se puede hacer en
javascript
multi en los últimos años es algo muy
muy chulo porque ya la solicitud está
siempre una suficiencia de ser
simplemente ponemos la palabra fecha
ponemos la url de esta url en cadena
y es una promesa si no conocen promesas
pongan en los comentarios si puedo hacer
un curso de promesas un vídeo con un
vídeo tiene dent una vez que se ejecuta
la función fecha al terminar se va a
ejecutar dentro y vamos a poner que la
respuesta
sea regresada
esto se llama función flecha son nuevas
bueno ya no admitan nuevas enviaba
script response y la quiero como texto
to pues también ejecutarla como jason
pero recordemos que la función que
acabamos de ejecutar jason parts recibe
un string entonces yo no va a regresar
como string que voy a rezar como string
todo esto que está aquí bien que a final
de cuentas todo esto que está aquí es un
jason bien aquí como text y una vez
regresado esto voy a hacer otra vez otro
dent que es encadenado y éste lo voy a
poner
mi resultado que ya se debería ser el
texto el jason convertido en texto y
este resultado vamos a hacer lo
siguiente este resultado en teoría
debería ser la cadena está convertida en
texto bien entonces ese resultado es un
arreglo es un arreglo de objetos en
formato jason entonces arreglo de
objetos lo vamos a poner creo que se
llaman posts hacemos a ponerle post
es igual a jason punto partes la función
que vimos hace rato y esto que mi
resultado que se supone debería ser la
cadena del resultado que hemos obtenido
por la petición fecha
punto y coma y vamos a imprimir por
ejemplo quiero imprimir
vamos a imprimir el 2 que el 2 debería
tener el aire y 2 y esta cosa que hice
aquí es ese no sé qué vamos a imprimir
el 2 johnson punto log
como este post es el resultado de jason
mi resultado que es una carne de texto
que pero la cadena es un jason
internamente que representa un arreglo
porque empieza con corchetes de de
objetos la posición 2 que en el arreglo
sería la u no debería tener estos datos
vamos a ver si es cierto vamos a poner
aquí potts la posición del arreglo 1
punto y coma
vamos adelante
y aquí vemos que la idea es el 2 que
esté ese y el body termina con duya
vamos a ver terminar como ya está ya
vieron para qué sirve
jason y eso es bastante potente es
solamente un formato tu puedes trabajar
si yo la verdad este boxer es la mejor
está hecho en php yo estoy reputando
desde javascript y no importa no importa
a final de cuentas es un jason tú
solamente vas te vas te va a servir para
como la paquetería tú vas a empaquetar
lo con tu guía y te va a valer el si se
va en camión en tráiler en avión en
barco en ovni y lo que sea simplemente a
ti lo que te importa es llevar las
reglas del formato de tu mensaje y el de
la paquetería lo va a mandar y el del
otro lado simplemente va a seguir las
mismas reglas del formato del mensaje en
este caso es jason es un formato no lo
confundan de un formato para el envío y
para la transferencia de datos donde
necesariamente web puede ser también con
wrap eres una persona entre lenguajes de
programación entre aplicaciones locales
pues therapy no una
necesariamente que es el internet y
puede ser por web service y bien jason
xml swap en si se utilizan los tres no
me pueden decir a este se utiliza
solamente si es importante que aprender
los tres este vídeo se trata de jason si
quieren que haga más vídeos de este tipo
que son para orientado a personas más
principiantes novatos de una manera
clara y directa pues pongan en los
comentarios del en me gusta y si quieren
que haga un vídeo de promesas también
pongan ahí abajo mi nombre es héctor de
león gracias por el vídeo si conocen a
alguien que le pueda servir el vídeo
pues compartan sido es gratuito aquí
todo es gratis
adiós chao
Посмотреть больше похожих видео
CÓMO CONSUMIR UN API con JAVASCRIPT desde la web
Tutorial SwiftUI Español - Cómo Leer un Archivo JSON (JSON, MapKit)
This is How I Scrape 99% of Sites
Qué es una API en Programación y cómo funciona | La mejor explicación en español, para principiantes
Pensamiento computacional: Tipos de datos
FormData en javascript - Obteniendo datos de un formulario - Como cuando y porque usarlo - JS
5.0 / 5 (0 votes)