¿Qué diablos es JSON? | Ejemplo práctico en #javascript

Summary

En 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

00:00

💻 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.

05:01

🔗 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.

10:02

📚 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.

Keywords

💡Programación

Programación se refiere al proceso de crear software o sistemas de computadora mediante la codificación de instrucciones en un lenguaje de programación. En el video, es el contexto general en el que se introduce a los nuevos programadores al uso de JSON, un formato de datos, para facilitar la comprensión y el aprendizaje.

💡JSON

JSON (JavaScript Object Notation) es un formato de texto ligero para el intercambio de datos. Se utiliza en el video para explicar cómo organizar y transferir datos entre diferentes tecnologías y lenguajes de programación, como se menciona cuando se habla de su uso más allá de JavaScript.

💡Navegador

Un navegador web es un software que permite a los usuarios acceder a contenido en la web. En el video, se menciona el uso de un navegador para trabajar con JSON sin necesidad de instalar software adicional, destacando la accesibilidad de trabajar con JSON.

💡API

API (Interfaz de Programación de Aplicaciones) es un conjunto de rutinas, protocolos y herramientas para construir software y aplicaciones. En el video, se menciona que JSON puede ser utilizado en una API, lo que indica su importancia en la comunicación entre diferentes sistemas.

💡Objeto

En programación, un objeto es una entidad que contiene datos y métodos. El video utiliza JSON para representar objetos, demostrando cómo se pueden estructurar y transmitir datos complejos como un objeto con atributos y métodos.

💡Atributos

Los atributos son las propiedades o características de un objeto. En el video, se muestra cómo representar atributos en JSON, como 'name' o 'gender', y cómo estos se asocian con valores específicos.

💡Tipos de datos

Los tipos de datos definen las formas en que los valores pueden ser almacenados y manejados en un programa. El video explica que JSON puede representar varios tipos de datos, como números, cadenas, arreglos y objetos anidados.

💡Arreglos

Un arreglo es una estructura de datos que almacena una colección de elementos, usualmente del mismo tipo. En el video, se muestra cómo representar arreglos en JSON, como una lista de nombres separados por comas.

💡Web Service

Un web service es un sistema que permite a los usuarios acceder a funcionalidades y datos a través de la web. El video menciona el uso de JSON en web services para enviar y recibir datos, como se ilustra con el ejemplo de una solicitud HTTP.

💡Promesas

Las promesas son una primitiva en JavaScript que representa un valor que puede estar pendiente de resolución. En el video, se menciona el uso de promesas en las solicitudes asíncronas, como en una solicitud HTTP que devuelve datos en formato JSON.

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