1

la problemática es la siguiente en angular tengo ciertos datos que me envían desde un endpoint el cual es el siguiente: introducir la descripción de la imagen aquí

la información que trae lo muestro de la siguiente manera: introducir la descripción de la imagen aquí

hasta aquí todo bien lo que necesito es lo siguiente necesito cambiar esos datos para que sea mas entendible para el cliente de esta manera: introducir la descripción de la imagen aquí

este es el servicio para consumir la información del endpoind

    export class DashboardService {
  constructor(private http: HttpClient, private AuthService: AuthService) {}
  //dashboard

  getDashboard = (): Promise<any> => {
    return this.http
      .get<any>(environment.host + 'dashboard', {
        headers: this.AuthService.userHeadersJSON(),
      })
      .toPromise();
  };
}

el component.ts en esta parte existe una grafica pero no le tomen inportancia lo que importa es donde se muestran los datos de "productos mas vendidos","top aseguradoras"

  constructor(private DashboardService: DashboardService) {}

  ngOnInit(): void {
    this.DashboardService.getDashboard().then(
      ({
        incomePerMonth,
        salesPerMonth,
        topInsurances,
        topProduct,
        topVehicles,
        totalIncome,
        totalSales,
      }: any) => {
        let objectIncomePerMonth = { data: [], label: 'Ingresos por mes' };

        incomePerMonth.forEach((element) => {
          objectIncomePerMonth.data.push(element.total);

          this.barChartLabelsIncomePerMonth.push(
            this.DiccionarioMeses.filter((e) => e.id === element.month)[0].label
          );
        });

        this.barChartDataIncomePerMonth.push(objectIncomePerMonth);

        let objectSalesPerMonth = { data: [], label: 'Ventas por mes' };

        salesPerMonth.forEach((element) => {
          objectSalesPerMonth.data.push(element.total);

          this.barChartLabelsSalesPerMonth.push(
            this.DiccionarioMeses.filter((e) => e.id === element.month)[0].label
          );
        });

        this.barChartDataSalesPerMonth.push(objectSalesPerMonth);

        this.topProduct = topProduct;

        this.topInsurances = topInsurances;

        this.topVehicles = topVehicles;
      }
    );
  }
}

y el component.html que es donde pinto los datos que se muestran

<diV class="row" style="margin-top: 10px; margin:20px; ">
  <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 margins6">
    <h3 style="margin-left: 15px">Productos más vistos</h3>
    <ol>
      <li *ngFor="let producto of topProduct">
        {{ producto.product }} {{ producto.provider }}
      </li>
    </ol>
  </div>
  <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 margins6">
    <h3 style="margin-left: 15px">Top aseguradoras</h3>
    <ol>
      <li *ngFor="let insurances of topInsurances">{{ insurances | uppercase}}</li>
    </ol>
  </div>
  <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 margins6">
    <h3 style="margin-left: 15px">Top de vehiculos asegurados</h3>
    <ol>
      <li *ngFor="let vehicles of topVehicles">
        {{ vehicles.brand }} {{ vehicles.model }} {{ vehicles.year }}
      </li>
    </ol>
  </div>
</diV>

1 respuesta 1

2

La opción mas rápida que pudiera implementar con esos datos que recibes es un pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'productoProvider'
})
export class ProductoProviderPipe implements PipeTransform {

  transform(value: string): string {

    switch (value) {
      case 'AM':
        return 'Amplia'
      case 'ES':
        return 'Esencial';
      case 'Basico':
        return 'Básico';
      case 'Pro':
        return 'Pro'
      default:
        return '';

    }
  }
} 

Luego en tu html aplicas el pipe personalizado

 <ol>
      <li *ngFor="let producto of topProduct">
        {{ producto.product }} {{ producto.provider | productoProvider}}
      </li>
 </ol>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.