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!