Transformaciones de Datos en el Frontend con Map y Pipes

Clase 14 de 23 • Curso de Consumo de APIs REST con Angular

Resumen

¿Cómo transformar peticiones en Angular?

Al trabajar con aplicaciones web, a menudo ocurre que los datos que recibimos desde el backend no son del todo adecuados para el frontend. Pueden faltar campos necesarios para mostrar información o realizar cálculos adicionales. En estos casos, es esencial entender cómo transformar peticiones en Angular para enriquecer los datos adicionando o calculando atributos nuevos antes de presentarlos al usuario.

¿Cómo se añade un atributo desde el frontend?

Para añadir atributos calculados en el frontend, el método getAllProducts será nuestra base de trabajo. Imaginemos que deseamos añadir un campo adicional llamado taxes a cada producto, que no está incluido en la respuesta del backend pero es crucial para nuestros usuarios.

Declarar el nuevo atributo: Primero, indicaremos que cada product tendrá un campo adicional llamado number, el cual será opcional. Esto se realiza en la definición del producto.
```
export interface Product {
  id: string;
  name: string;
  price: number;
  // Nuevo campo opcional
  number?: number;
}
```

Calcular el nuevo atributo en el servicio: Luego, usaremos el operador map del servicio para calcular este nuevo atributo.

getAllProducts() {
  return this.http.get<Product[]>(this.apiURL)
    .pipe(
      map(products => products.map(product => ({
        ...product,
        taxes: product.price * 0.19 // Suponiendo un IVA del 19%
      })))
    );
}

¿Cuál es el papel del operador map en la transformación?

El operador map en Angular es fundamental para transformar datos observables. Al recibir un array de productos, podemos aplicarle nuevas transformaciones, convirtiendo cada respuesta en algo más acorde a nuestras necesidades.

Transformaciones observables: Esto implica analizar la respuesta del backend y modificarla antes de su consumo.
Transformaciones de elementos: Una segunda transformación utiliza el map nativo de JavaScript para aplicar cambios específicos en cada elemento del array.

Esta fluidez y adaptabilidad pueden ser vitales cuando los requisitos de negocio cambian o el diseño de la UI requiere información específica.

¿Cómo mejorar la presentación de datos con pipes?

Cuando calculamos valores como el de impuestos, es común enfrentarse a la presentación de números con varios decimales. Angular provee pipes que son herramientas útiles para transformar la salida de manera visualmente atractiva.

Uso del pipe de moneda: Podemos usar el pipe especial para manejar la presentación de monedas, asegurando que el valor se muestre adecuadamente en la interfaz, con el formato regional correcto.
```
<span>{{ product.taxes | currency:'USD':true }}</span>
```

Este formato no solo mejora la legibilidad de la información, sino que también aumenta la usabilidad de la aplicación al adaptar los datos a las expectativas de los usuarios.

¿Cuáles son las mejores prácticas de transformación?

Es importante recordar que la lógica de negocio debe residir en los servicios, para que el componente se dedique simplemente a su responsabilidad principal: renderizar y gestionar la interacción con el usuario. Esto facilita la reutilización de código y mantiene el componente limpio y manejable. Además:

Aislar la lógica en el servicio: Esto permite que la transformación o cualquier operación sobre los objetos de datos sea más mantenible.
Reutilizar lógica de transformación: Facilita la integración con otros componentes que puedan requerir datos de manera similar.

En fin, el uso inteligente de estas transformaciones en Angular puede optimizar el proceso de desarrollo, asegurando al mismo tiempo que la aplicación se mantenga flexible y preparada para escalar o adaptar requisitos futuros. ¡Sigue aprendiendo y viendo cómo estos conceptos pueden aplicarse en otros contextos!

Jorge Luis Cantillo Correa

student•

Si no les sale el el valor en su html... prueben pondiendo el codigo en el metodo getProductsByPage

Henry Fuentes

student•

Muchas gracias.

Daniel Avila Cardenas

student•

Muchas gracias...

Franklin Gil

student•

Hay un error en esta clase en la parte de product?.taxes lo que hace el ? en product? es validar si el objeto product existe, entonces usa la propiedad .taxes, por tanto product?.taxes no va a generar ningun error.

Lo ideal seria usar el ?? de la siguiente forma: product.taxes ?? '' es decir, si la propiedad es null o undefined coloca un string vacio.

en que momeno se puede usar el ??

Siguiendo este curso una opcion podria ser las imagenes. Si product.images viene null o undefined ahi si aplica y querdaria asi: product.images?.length

Luis Acosta

student•

Funcionó ✅

Néstor Acevedo Romero

student•

No es tan error. En la consola sale más como un warning pero el código compila y corre bien. Ese warning aparece desde la penúltima versión de TypeScript además que el propio IDE ya identifica esto, pero para ahorrarse un dolor de cabeza al ver al IDE quejarse igual que NodeJS y TS, product.taxes ?? '' es la mejor opción.

camilo yule

student•

recordar que en el componente products, en oninit cargamos los productos por medio del servicio getProductsByPage, por ende es en este servicio es donde debemos usar el map dentro del pipe para que este agregue el elemento taxes que en los productos queremos visualizar. ( el pipe en getAllProducts ya no se usa a este punto).

Lisandro Andrade Franco

student•

Gracias, me funciono usando el pipe en getProductsByPage

getProductsByPage(limit: number, offset: number) { return this.http.get<Product[]>(${this.apiUrl}, { params: { limit, offset } }) .pipe( map(products => products.map(item => { return { ...item, taxes: .19 * item.price } })) ); }

en el product.component.html

<p>valor iva: {{ product.taxes ?? '' }}</p>

LUIS ANTONIO CALVO QUISPE

student•

Muchas Gracias

    getAllProducts(limit?: number, offset?: number){
      let params = new HttpParams();
      if (limit && offset){
        params = params.set('limit', limit);
        params = params.set('offset', offset);
      }
      return this.http.get<Product[]>(this.apiUrl, { params })
      .pipe(
        retry(3),
        map(products => products.map(item =>{
          return {
            ...item,
            taxes: .19 * item.price
          }
        }))
      );
    }

    getProductsByPage(limit: number, offset: number){
      return this.http.get<Product[]>(`${this.apiUrl}`,{
        params: { limit, offset }
      })
      .pipe(
        retry(3),
        map(products => products.map(item =>{
          return {
            ...item,
            taxes: .19 * item.price
          }
        }))
      );
    }```

Jimmy Buriticá Londoño

student•

RxJS map() operator is a transformation operator used to transform the items emitted by an Observable by applying a function to each item. Documentación

Andres López

student•

A veces puede ser necesario hacer transformaciones a la respuesta de una petición, para poner ejemplo agregar datos para complementar la información que entrega el backend.

RXJS .map() → Es un operador que permite tomar cada uno de los valores que lleguen en el observable y aplicarles una transformación.

// Obtener los productos desde la API
  getProducts(limit?: number, offset?: number) {
    ...
    return this.http.get<Product[]>(this.apiUrl, { params })
    .pipe(
      map(products => products.map(item => {
        return {
          ...item,
          taxes: .19 * item.price
        }
      }))
    )
  }

products → Agrupa la respuesta del observable, esta es un array. Luego se usa un map nativo para agregar el atributo taxes a cada objeto dentro de products.

Luego en la vista del componente se podría renderizar esta propiedad:

<p>Valor IVA: {{ product?.taxes | currency }}</p>

El operador de optional chaining (?) permite que la propiedad solo se muestra si su valor no es nulo.

Andres López

student•

Complemento con el aporte del compañero en el que corrige el uso de optional chaining en este caso: https://platzi.com/comentario/4041036/

John Ruiz

student•

Hola, He seguido la clase, y agregado el código para las taxes, pero no renderiza el valor y no da error al compilar. Algun@ a tenido el mismo resultado.

Gracias de antemano.

Jainelker Jesus Yepez

student•

Hola John 👋🏻 ¿puedes compartir un print de pantalla para ayudarte?

John Ruiz

student•

Hola Jesús, si claro, estuve repasando nuevamente la clase por si se me hubiera pasado algo, pero no logro encontrar el error, les comparto el código: product.model.ts

product.service.ts

producto.component.html

browser

Muchas gracias de antemano.

Emilio Nicolás Mendoza Patti

student•

Creo que vi esta misma notacion cuando comence a trabajar y al fin puedo decir que la entiendo bien

Reinaldo Mendoza

student•

No es lo mas explicito del mundo, pero lo entiendo, algo he avanzado en mi js, jaja

Alejandro Hugo Herms

student•

Te hago una consulta! Ya vi anteriormente el uso de "...item" cuando se trata de recorrer o agregar algo a un array. Cual sería el motivo de el "..."? Gracias!

Diego Fernando Caviedes Camaho

student•

el signo .? se llama Optional chaining (?.). pueden ver el curso de : https://platzi.com/clases/1815-ecmascript-6/39727-ecmascript-2020-caracteristicas-importantes/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

David Castro

student•

Bien interesante, muchas gracias Diego.

Luis Angel Flores Galindo

student•

He buscado y no he encontrado una manera para resolver lo del map, :S Alguna idea?

import { retry, catchError, map } from 'rxjs/operators';

return this.http.get<Product[]>(`${this.apiUrl}/products`, { params })
.pipe(
    retry(3),
	map((products) =>
        products.map((item) => {
          return {
            ...item,
            taxes: .16 * item.price
          };
        })
      )
    );

Daniel Meza

student•

a tu operador map() le hace falta un return. Diciendo, de esta lista de productos, devuelve el resultado que retorna el nuevo arreglo del map() convencional (que no es RxJS).

getAllProducts(limit?: number, offset?: number): Observable<Product[]> {

letparams = new HttpParams();
    if (limit && offset) {
      params = params.set('limit', limit);
      params = params.set('offset', offset);
    }
    returnthis._http.get<Product[]>(this.apiUrl)
      .pipe(
        map(products => {
          return products.map(product => {
            return {
              ...product,
              taxes: product.price * .16
            }
          })
        })
      );
  }

Siempre recuerda que un map() sea el operador de RxJS o el convencional, debe retornar algo. Y si abres un scope donde meterás lógica deberás colocar un return

Luis Angel Flores Galindo

student•

Muchas gracias, sabes gracias a tu respuesta me di cuenta de otra cosa super básica, estaba utilizando getProductByPage() y nunca llegue a usar la función getAllProducts(), por eso no salia lo de los taxes, y por ende el map no corria xD

Juan Miguel Jimenez

student•

El operador RxJS map() es un operador de transformación que se utiliza para transformar los elementos emitidos por un Observable aplicando una función a cada elemento.

Ctrl Plus Technology for Business S.A.P.I. de C.V.

student•

Y si quisiera agregar "taxes" a mi objeto product cuando abro el detalle... ¿como le haría? Ya que ya no es un array para usar map, ahora el request me devuelve el objeto de product. Quisiera saber como manipular un objeto y agregarle una nueva variable

Erick Daniel Rivadeneira Obregon

student•

Tengo un problema con mi codigo, si le mando a ejecutar este corre sin problema, de igual forma le mande un ng lint y todo va bien. este es getProduct(id: string) { return this.http.get<Producto>(${this.apiUrl}/${id}).pipe( catchError((error: HttpErrorResponse) => { if (error.status == HttpStatusCode.Conflict) { return throwError('Algo esta fallando en el Server'); } if (error.status == HttpStatusCode.NotFound) { return throwError('El producto no existe'); } if (error.status == HttpStatusCode.Unauthorized) { //erro 401 cuando uno no esta autorizado return throwError('No estas permitido para ingrasar'); } return throwError('Ups algo salio mal'); }) ); }

throwError sale tachado con una linea en el medio de la palabra. Ayer corria perfecto y hoy que basicamente no le he ehcho nada ya no salen las imagenes de la tienda al comienzo. Que podria ser

joan luna

student•

no me imprime el calculo de los taxes en el product html :c alguien tiene una idea del porque ?

<<app-img *ngIf="product.images.length > 0"  [changeimg]="product.images[0]"></app-img>
<h3>{{product.price | currency:'MEX'}}</h3>
<p>{{product?.taxes | currency:'MEX'}}</p>
<p>{{product.title}}</p>

<!--//<p appHighlight>{{product.description}}</p>-->
<button (click)="onShowDetail()">ver detalle</button> 
<button (click)="onAddtoCart()">Agregar al Carrito</button> >

)

 getallProducts(limit?: number, offset?:number){
    let params= new HttpParams();
    if(limit&& offset){
      params = params.set('limit', limit);
      params = params.set('offset', limit);
    }
    return this.http.get<Product[]>(this.apiURL, {params})
    .pipe(
      retry(3),
      map(products=>products.map(item=>{
        return{
          
          ...item,
          taxes: .19 * item.price
          
        }
        
      }))
    )
    
  }

Norma Natalia Moreno Espinoza

student•

Hola!

Noto que tienes algunos detalles con el typo , como la palabra let junto al igual que despues de limit&& y algunos otros detallitos como un punto despues del this.apiUrl te paso el como deberia estar el getAllProducts

getAllProducts(limit?: number, offset?: number) {
    let params = new HttpParams();
    if (limit && offset) {
      params = params.set('limit', limit);
      params = params.set('offset', limit);
    }
    return this.http.get<Product[]>(this.apiUrl, { params })
    .pipe(
      retry(3),
      map(products => products.map(item => {
        return {
          ...item,
          taxes: .19 * item.price
        }
      }))
    );
  }

¡Nunca pares de aprender! 💚

joan luna

student•

<code>

César Evelio Castro Varela

student•

Swal.fire({ title: 'Lo siento', text: 'El producto ' + errorMsg, icon: 'error', confirmButtonText: 'OK' }); console.log(errorMsg); this.statusDetail = 'error'; });