Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Angular 2 avanzado: Trabajo con APIs

Desplegar resultados en una lista

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
Una vez que tengamos acceso a los datos, utilizaremos la directiva ng For para iterar sobre los resultados de la API y los convertiremos en una lista de HTML para desplegarse gráficamente en un documento web.
06:07

Transcripción

Cuando trabajamos con API externas, lo primero que tenemos que hacer una vez que tenemos información es desplegar los resultados. En esta lección vamos a aprender cómo desplegar una lista de resultados a partir de la información que se encuentra en una API externa. Acá yo estoy conectándome desde un componente de Angular a una aplicación que se encuentra en un servidor local. Estoy ejecutando mi servidor dentro de una terminal y también dentro de otra de las terminales estoy ejecutando el servidor de Angular para poder tener acceso a toda la información. Ahora, en este punto yo me estoy conectando a un servidor, en este caso el localhost con el puerto 8080, donde tengo la información de una base de datos, a partir de la dirección "api/lista". La respuesta que estoy obteniendo la estoy desplegando dentro de la consola. Vamos a revisar el resultado y es esta información que tengo acá. Si yo actualizo, envío la información a la consola una vez que me conecto y vemos que acá tengo dos objetos, estos dos objetos contienen información, y vamos a utilizar estos datos para desplegar una lista por cada uno de estos objetos. Esto lo vamos a hacer entrando a la aplicación y primero vamos a definir una variable, en este caso se va a llamar "tareas", y vamos a definir que esta variable llamada "tareas" va a ser de tipo "array", y este "array" o arreglo vamos también a definirlo como un arreglo de objetos, o sea, vamos a recibir un grupo ordenado de objetos. Vamos a guardar y yo voy a tomar esta variable "tareas" y acá, donde recibo la información del servicio externo, voy a igualar la variable "this. tareas" que se encuentra en mi aplicación, la voy a igualar a la información que me llega como respuesta, que en este caso es "respuesta . json". Vamos a eliminar la información que se está enviando a la consola y vamos a tomar esta información que está acá y vamos a ir a la plantilla de nuestro componente, vamos eliminar la información que se encuentra en ella y vamos a crear una lista. Ahora, nosotros, dentro de la plantilla tenemos acceso a cualquier variable que se encuentre dentro de la programación de nuestra aplicación, por ejemplo yo tengo acceso directo a la variable "tareas", así que vamos a trabajar eso y voy a crear un ítem dentro de la lista y voy a definir una directiva llamada "ngFor" donde voy a iterar sobre cada uno de los elementos que se encuentren dentro del objeto que acabo de definir, en este caso dentro de "tareas". Como "tareas" ha sido definido como un arreglo, vamos a tomar ese arreglo y por cada uno de los ítems que estén ahí vamos a obtener una instancia, en este caso se va a llamar "ítem" y vamos a definir que "ítem" se va a encontrar dentro de cada uno de los elementos de "tareas". No vamos a poner "this. tareas", sino que vamos a llamar directamente "tareas". Así que vamos a iterar sobre el arreglo "tareas" y vamos a obtener una instancia de cada uno de los elementos que están ahí dentro de la variable "ítem". Ahora tenemos a "ítem" y sabemos que "ítem" es un objeto a su vez, tal como lo hemos declarado, así que voy a incluir dentro de la plantilla estas dos llaves y las dos llaves nos permiten a nosotros desplegar variables dentro de Angular, así que yo voy a llamar a "ítem" y voy a poder llamar acá, una vez que esté dentro de este objeto, cualquier elemento que esté dentro de sus propiedades. Si nosotros revisamos... bueno, acá me está dando un error porque estoy tratando de conectarme con un formato incorrecto, pero vamos a revisar nuestra aplicación, aún no me muestra la base de datos pero podemos verla dentro de la conexión que está acá. Aquí está nuestra base de datos, así que vamos a revisar cuál es la información que me está enviando. Si yo reviso acá, vamos a ver que tengo una casilla llamada "texto", también tengo una llamada "id" y otra "v", pero son casillas de sistema, específicamente la información nuestra la vamos a sacar de "texto". Quiero que notes que cada uno de estos elementos son los mismos que vamos a desplegar dentro de la lista. Así que, como este elemento que está acá es lo mismo que "ítem", dentro de mi plantilla yo voy a llamar a la propiedad "texto". Venimos a la plantilla y llamamos "item. texto". También puedo llamar "id" o cualquiera de los elementos que se encuentren en este nodo dentro del objeto que estoy trabajando. Ahora sí –tengo un error de sintaxis acá, con dos asteriscos, solamente puede haber uno–, listo, guardamos la aplicación, revisamos el resultado y vemos que ahora tenemos dos diferentes mensajes, tenemos: 'Lorem Ipsum' y'Lorem Ipsum 2', tenemos elemento dentro de nuestra lista. Si yo reviso directamente el servicio, puedo ver que tengo también dos 2, uno llamado Lorem Ipsum 2 y Lorem Ipsum. Ya estamos desplegando información que nos está llegando desde una API externa, estamos haciendo una llamada directa a esta API y estamos desplegando la información a través de la directiva "ngFor", dentro de nuestra aplicación Angular 2.

Angular 2 avanzado: Trabajo con APIs

Comprende el funcionamiento de una API y cómo llevar a cabo sus procesos, así como controlar su funcionamiento mediante Angular 2, gracias a este ejemplo práctico.

3:02 horas (29 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:4/05/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.