Obteniendo datos una REST API

Curso de Angular: Creación de Aplicaciones Web

Introducción a Angular y Fundamentos

Desarrollo de Aplicaciones Modernas con Angular

Creando tu primer proyecto en Angular

Creación de componentes y rutas en Angular para gestión de tareas

String Interpolation en Angular: Transmisión de Datos a Templates

Modificación de Propiedades HTML con Angular: Property Binding

Eventos en Angular: click, doble click y cambio de input

Eventos de Teclado en JavaScript: Uso de KeyDown y Change

Reactividad Granular con Signals en Angular

Reactividad en HTML: Implementación de Signals en JavaScript

Estructuras de control en Angular

Estructuras de Control y Renderizado Dinámico en Angular

Gestión Dinámica de Tareas en JavaScript: Creación y Eliminación

Estructuración de Tareas en JavaScript: Uso de Interfaces y Typing

Actualización de tareas con Angular y programación inmutable

Uso de ngIf y ngFor para control de flujos en Angular

Pluralización y ngSwitch en Angular para manejo de condiciones múltiples

Manejo Avanzado de Formularios Reactivos en Angular

Validaciones de Inputs en Formularios Reactivos con Angular

Alistando tu aplicación para producción

Validación de formularios y estilos dinámicos en Angular

Activación dinámica de clases en Angular con validaciones

Edición de Tareas Dinámicas en Aplicaciones Web

Estados Computados en Programación Reactiva con Signals

Persistencia de Tareas con LocalStorage en Angular

Compilación y Optimización de Aplicaciones Angular para Producción

Lanzamiento de Aplicaciones con Fiverr Hosting y Angular

Nuevas Sintaxis Declarativas en Angular Inspiradas en Svelte

Sintaxis y rendimiento de for y switch en JavaScript moderno

Migración Automática a Nueva Sintaxis de Angular

Componentes Reutilizables y Comunicación

Creación de Tienda en Línea con Angular y Tailwind CSS

Creación y Organización de Componentes en Angular

Componentes Reutilizables en Angular: Creación y Maquetado de Productos

Uso de Angular DevTools para Debugging en Angular

Inputs en Angular: Comunicación de Datos entre Componentes

Outputs en Angular: Comunicación del Hijo al Padre

Maquetación de Galería de Productos con Tailwind CSS

Ciclo de vida de los componentes

Ciclo de Vida de Componentes en Angular

Creación y Uso de Componentes en Angular: Ciclo de Vida y Comunicación

Ciclo de Vida de Componentes en Angular: Eventos Clave

Detección de Cambios en Inputs con ngOnChange en Angular

Prevención de fugas de memoria con ngOnDestroy en Angular

Creación de un Reproductor de Audio con WaveSurfer.js en Angular

Mejoras de la página About en e-commerce: audio y contador dinámico

Mejorando la interfaz del producto

Componentización y Manejo de Datos en Angular

Creación de Headers en Páginas Web con Angular

Implementación de Interfaz Gráfica para Carrito de Compras Interactivo

Implementación de Reactividad en Carrito de Compras con Angular

Gestión de Carrito de Compras en Angular con ngOnChanges

Gestión de Estado en Angular: Solución al InputDrilling

Gestión de Estado Global en Angular con Servicios y Señales

Inyección de Dependencias en Angular: Conceptos y Prácticas

Integración y Datos

Conexión de Angular a REST API usando Fake Store API de Platzi

Creación de Alias para Imports Cortos en Proyectos JavaScript

Transformación de Datos con Pipes en Angular

Creación y uso de pipes personalizados en Angular

Manipulación de Fechas en Angular con Date Functions

Manipulación del DOM con Directivas en Angular

Deployment de Aplicaciones Angular en Vercel

Enrutamiento y Navegación

Creación de Página 404 en Angular: Manejo de Rutas No Encontradas

Implementación de Router Link en Angular para SPA eficiente

Implementación de Layouts Compartidos en Angular para Vistas Anidadas

Uso de RouterLinkActive en Angular para Navegación Activa

Routing en Angular: Creación de Páginas de Detalle de Producto

Consulta dinámica de detalles de producto con Angular y REST API

Galería de Productos Dinámica con Angular y TypeScript

Mejoras en Detalle de Producto: Precio, Carrito e Imagen Activa

Perfeccionando tu e-commerce

Filtrado de Productos por Categoría en E-commerce

Filtros de Productos con Query Params en Angular

Optimización de Aplicaciones con Lazy Loading y Code Splitting

Optimización de JavaScript en Angular con Lazy Loading

Optimización de Carga de Chunks con Preloading en Angular

Migración de Angular a Nueva Sintaxis con ng generate

Despliegue de Aplicaciones con Verzal en Entornos Productivos

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 28

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

fjccandelario

hace un año

Platzi! Las imagenes de la lista de productos no se están resolviendo, me da un error 404.

Andres Sanchez

hace un año

*Por si tienen problemas al tratar de visualizar las imágenes es un problema de la api, pero aquí les comparto mi servicio con la solución para que puedan ver las imágenes en el front* ```js import { HttpClient } from '@angular/common/http'; import { Injectable, inject } from '@angular/core'; import { map } from 'rxjs/operators'; import { Product } from '../models/product.model'; @Injectable({ providedIn: 'root' }) export class ProductService { private http = inject(HttpClient); constructor() { } getProducts(){ return this.http.get<Product[]>('https://api.escuelajs.co/api/v1/products').pipe( map(products => products.map(product => ({ ...product, images: product.images.map(image => this.cleanAndParseImageUrl(image) ) })) ) ); } private cleanAndParseImageUrl(image: string): string { let cleanedImage = image.replace(/^\["?|"?]$/g, ''); try { cleanedImage = JSON.parse(cleanedImage); } catch (error) { // } return cleanedImage; } } ```*import* { HttpClient } *from* '@angular/common/http';*import* { Injectable, inject } *from* '@angular/core';*import* { map } *from* 'rxjs/operators';*import* { Product } *from* '../models/product.model'; @Injectable({ providedIn: 'root'})*export* class ProductService { private http = inject(HttpClient); constructor() { } getProducts(){ *return* *this*.http.get\<Product\[]>('https://api.escuelajs.co/api/v1/products').pipe( map(products => products.map(product => ({ ...product, images: product.images.map(image => *this*.cleanAndParseImageUrl(image) ) })) ) ); } private cleanAndParseImageUrl(image: string): string { let cleanedImage = image.replace(/*^*\\\["?|"?]*$*/g, ''); *try* { cleanedImage = JSON.parse(cleanedImage); } *catch* (error) { *//* } *return* cleanedImage; }}

Jhonny Zapata

hace un año

en esta pagina puede tomar el json de respuesta de su api y se las traduce a la interface correspondiente según el lenguaje que seleccionen . <https://app.quicktype.io/>

Juan Sebastian Obregón Cuellar

hace 3 meses

Las imágenes siguen fallando, una forma fácil de solucionarlas es la siguiente: ```js import { HttpClient } from '@angular/common/http'; import { Injectable, inject } from '@angular/core'; import { map } from 'rxjs/operators'; import { Product } from '../models/product.model'; @Injectable({ providedIn: 'root' }) export class ProductService { private http = inject(HttpClient); constructor() { } getProducts(){ return this.http.get<Product[]>('https://api.escuelajs.co/api/v1/products').pipe( map(products => products.map(product => ({ ...product, images: product.images.map(() => 'https://picsum.photos/640/640?r=' + Math.random() ) })) ) ); } } ```

Cesar Luis Salazar Cortez

hace 4 meses

Tengo una duda estoy haciendo el curso y todo va bien pero al momento de ver los resultados todo esta en blanco el error dice que las imagenes de la api no son seguras y angular no lo renderiza necesito ayuda porfa

Kevin Nicolas Ruiz Camargo

hace un año

Hay varias extensiones en VS Code que permiten consultar API's desde el editor de código. **POSTMAN:** ![](https://static.platzi.com/media/user_upload/image-3c6bb7b4-2a4c-4a57-b812-3f7b713b6e3b.jpg) **THUNDER CLIENT:** ![](https://static.platzi.com/media/user_upload/image-5a121929-2e31-4837-997d-eba5f5f4196c.jpg) Ambas son muy buenas y prácticas.

norelys solorzano

hace un año

Hola!! estoy haciendo el curso tal y como lo esta haciendo Nico en los videos pero la API parece no funcionar, tengo todo igual y no me trae los productos a mi app. No se que pueda estar pasando.

Junior Jose Blanco Mercedes

hace 8 meses

no se visualizan las imagenes del api

Alfredo Cano

hace un año

Gracias Nico, no he visto el curso, pero en mi trabajo inicie una app en angular 17 y estaba intentando conectar a httpclient como se hace en angular 14, prometo verlo completo xD

Cesar Francisco Zendejas Torres

hace 23 días

Si tienes problemas con el renderizado de las imagenes es por la configuracion del HttpClient donde el fetch no esta siendo llamado ![](https://static.platzi.com/media/user_upload/image-d8e40493-dd10-482e-9664-0ce962120e2b.jpg) ademas de reforzar la validacion con el window para que no intervenga con el rendimiento por que este no existe en para el cliente al renderizarce y asegurar que se destruya en el ngOnDestroy![](https://static.platzi.com/media/user_upload/image-490d40a1-c137-4fff-bf05-6c4fea0e8edc.jpg)![](https://static.platzi.com/media/user_upload/image-73984488-832d-42a0-82de-a1a569e1c093.jpg)![](https://static.platzi.com/media/user_upload/image-dd555ca1-0d4d-4527-9334-2e00583d431b.jpg)

cesar mauricio torres arias

hace 3 meses

![](https://static.platzi.com/media/user_upload/image-98175247-cf77-4092-98b8-70ac44b7d97c.jpg) Algunas imagenes en el Json llegan con errores en las urls, por ello no se renderizan y angular las tiene por sospechosas. Andrés Sanchez, puso en los comentarios una solución con expresiones regulares. muy interesante.

Yessica Alexandra Malaver Gómez

hace 5 meses

En Angular 17, el `HttpClient` se inyecta usando una nueva función llamada `inject`, lo cual simplifica la inyección de dependencias en comparación con los constructores tradicionales. Este cambio permite una mayor flexibilidad, ya que puedes utilizar `inject` en cualquier lugar de tu clase, no solo en el constructor. Esto es parte de una tendencia hacia un enfoque más directo y conciso en la programación con Angular, mejorando la legibilidad y la organización del código.

Danilo Caro

hace 6 meses

¿Que recomiendan usar para el manejo de errores de servicios que consuman API's REST?

Julio Bastidas

hace 9 meses

me encanta, tengo varios años con platzi y dezconocia de Fake API, esta genial

joseangelsorianogonzalez

hace 10 meses

todo eso lo realiza chatGPT o Antropic Claude, convertir a json de ida y regreso, crear clases en c#, etc...

Cesar Francisco Zendejas Torres

hace 10 meses

Unos días atrás hice un aporte de resolución para que se renderizaran las imágenes pero me di cuenta que el instructor hizo una estructura muy optimizada que seguí en su totalidad y no me resultaba hasta que me di cuenta que en el servicio ponía ( ' ' ) estas comillas para el link y en realidad lleva estas comillas ( ` ` ) y cuando las cambie se renderizaron las imágenes con la propuesta del instructor

Cesar Francisco Zendejas Torres

hace 10 meses

Aqui esta mi aporte pero aun no se pintan bien las images ya que solo carga una y las demas las coloca como descripcion Esto es en el Servicio Inyectable export class ProductService { private http = inject(HttpClient) constructor() { } getProducts(){ return this.http.get\<Product\[]>('https://api.escuelajs.co/api/v1/products').pipe(map(products => products.map(product => ({ ...product, images: product.images.map(image => this.cleanAndParseImageUrl(image)) })))); } private cleanAndParseImageUrl(image: string): string { let cleanedImage = image.replace(/^\\\["?|"?]$/g, ''); try { cleanedImage = JSON.parse(cleanedImage); } catch (error) { } return cleanedImage; } Esto es en el componente export class ListComponent { products = signal\<Product\[]>(\[]); private cartService = inject(CartService); private productService = inject(ProductService); // cart = signal\<Product\[]>(\[]); addToCart(product: Product) { this.cartService.addToCart(product) } ngOnInit() { this.productService.getProducts().subscribe({ next: data => { const items = data.map(x => ({ ...x, images: x.images.map(a => a.replace(/\\\\\\\["(.\\\*)"]/, '$1')), })); this.products.set(items); }, error: error => {console.log(error); }, }); }

Ronny Valdivieso

hace 10 meses

Por lo visto, están actualizando el api, pero el arreglo de imágenes de productos está mal formado.

Ronny Valdivieso

hace 10 meses

Al día de hoy, las urls de las imágenes de los productos no son válidas. Aquí les dejo una pequeña solución para reemplazar las urls de las imágenes por urls válidas. ```js export class ProductService { private http: HttpClient = inject(HttpClient); private apiUrl = environment.apiUrl; private endpoint = `${this.apiUrl}/products`; private fixImages(images: string[]): string[] { return images.map((image: string) => { return 'https://picsum.photos/640/640?r=' + Math.random(); }); } public getAll(): Observable<Product[]> { return this.http.get<Product[]>(this.endpoint) .pipe(map((products: Product[]) => { products.map((product: Product) => { product.images = this.fixImages(product.images); }); return products; })); } } ```

LogycaTI

hace un año

Les comparto mi solución para el tema de las imágenes, a día de hoy 28/05/24 hay imágenes que no se cargan pero si se parce la url. Es solamente que algunas imagenes que entrega la api ya no estan disponibles. ngOnInit(): void { this.productService.getProducts().subscribe(res => { this.products = res.map(product => { if (product.images && product.images.length > 0) { const jsonString = product.images\[0]; try { const urlArray = JSON.parse(jsonString); if (urlArray && urlArray.length > 0) { // Actualizar la propiedad 'images' del producto con la URL parseada product.images = urlArray; } } catch (e) { console.error('Error al parsear JSON', e); } } return product; }); // Imprimir productos para verificación console.log(this.products); }); }

jose zuñiga

hace un año

En este momento la api tiene problemas en la entrega de imágenes. Si es al momento de su uso tiene la información de esta manera: "images": \[ "\[\\"https://picsum.photos/1100/1100/\\"", "\\"https://picsum.photos/1100/1100\\"]" ] Modifica el servicio mediante un pipe. Basicamente debes tomar la respuesta y aplicarle un filtro para tener el array de imagenes como deberia estar. Te dejo las lineas de código en un par de clases entenderás que es un pipe. `import { Injectable, inject, signal } from '@angular/core';` `import { Product } from '../models/product. Model';` `import { HttpClient } from '@angular/common/http';` `import { map } from 'rxjs/operators';` `@Injectable({ providedIn: 'root'})` `export class ProductsService { ` `products= signal<Product[]>([]); ` `url: string = "https://api.escuelajs.co/api/v1/products"; private http = inject(HttpClient);` ` getProducts(){ ` `return this.http.get<Product[]>(this.url)` `.pipe( map(products => this.transformProducts(products)) ); ` `}` ` ` `private transformProducts(products: Product[]): Product[] { return products.map(product => { ` `// Realiza la transformación en cada producto aquí const transformedImages = product.images.map(image => { let modifiedImage = image.replace(/"/g, ''); ` `// Elimina comillas dobles ` `modifiedImage = modifiedImage.replace(/\[/g, '').replace(/\]/g, ''); ` `// Elimina corchetes ` `return modifiedImage; });` ` return { ...product, ` `images: transformedImages ` `}; ` `}); ` `}}`

José Luis Vinces García

hace un año

el error es Platzi Fake arreglen su API xd ![](https://static.platzi.com/media/user_upload/image-3987b35c-f49c-4d7b-b434-ae340d4b5177.jpg)

ALEXANDER BETANCUR MELCHOR

hace un año

hola A todos he seguido los pasos al pie de la letra y y no renderizan las imagenes

J. Sebastián Botello. H.

hace un año

Así me sirvio a mi ```js ngOnInit() { this.productService.getProducts() .subscribe({ next: (products) => { this.products.set(products as Product[]); }, error: (error) => { console.log(error); } }); } ``` ngOnInit() { this.productService.getProducts() .subscribe({ next: (products) => { this.products.set(products as Product\[]); }, error: (error) => { console.log(error); } }); }

Jose Noriega

hace un año

Aporte (Mostrar imágenes) Les comparto mi solución para corregir el error de formato en las imágenes. ```typescript this.productService.getProducts().subscribe({ next: data => { const items = data.map(x => ({ ...x, images: x.images.map(a => a.replace(/\\\["(.\*)"]/, '$1')), })); this.products.set(items); }, error: error => { console.log(error); }, }); ``` \## Extra Si a alguien no le funciona la función subscribe como amí, pueden usar un fetch normal para continuar con el curso. ```typescript fetch('https://api.escuelajs.co/api/v1/products') .then(response => response.json()) .then(data => { // normalize data const items = (data as Product\[]).map(x => ({ ...x, images: x.images.map(a => a.replace(/\\\["(.\*)"]/, '$1')), })); this.products.set(items); }) .catch(error => { console.log(error); }); ``` Yo encontré que `this.products.set(...)` no funciona cuando está dentro del `subscribe`, pero fuera sí; aún no se la causa, si alguien tiene idea de que pasa agradecería el apoyo. ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Victor Hugo Vázquez Gómez

hace un año

Hay unos strings de imagenes que estan asi: "[\"https://i.imgur.com/eGOUveI.jpeg\"]" y hacen que de un error a la hora de renderizar la imagen.

Sebastian Alarcon

hace un año

Se debería enseñar como utilizar tokens y parámetros, son muy utilizados y requeridos al consumir las APIREST

ANDRES ALFONSO MIRA MEJIA

hace un año

✅