Angular 7 - Popular object on return of API service. httpClient

Question

Thanks in advance for your attention.

I am having difficulty popular an object list returned from an API in Angular 7. My service class is returning the service data, but I can’t get popular in my object list (returned from service). Below are details of my implementation.

Json

{  
   "sucess":true,
   "message":"Sucesso",
   "data":[  
      {  
         "codigoPlanoContratacao":"DGC1",
         "codigoCobertura":223,
         "descricaoCobertura":"ASSISTENCIA DOMICILIAR II",
         "codigoTipoRisco":0,
         "valorImportanciaSegurada":0,
         "valorPremioLiquido":24.0
      },
      {  
         "codigoPlanoContratacao":"DGC1",
         "codigoCobertura":400,
         "descricaoCobertura":"INC./RAIO/EXPL./QUEDA AERONAVE",
         "codigoTipoRisco":0,
         "valorImportanciaSegurada":50000,
         "valorPremioLiquido":26.25
      },
      {  
         "codigoPlanoContratacao":"DGC1",
         "codigoCobertura":404,
         "descricaoCobertura":"VENDAVAL/IMPACTO VEICULO",
         "codigoTipoRisco":0,
         "valorImportanciaSegurada":10000,
         "valorPremioLiquido":31.09
      }]
}

My service.ts

  TodasCoberturas() : Coberturas[] {
         this.http.get<Coberturas[]>(this.UrlServiceV1 + "combinadoPlano?codigoTipoRisco=1")   
        .subscribe(
          data => {
            debugger;
            this.coberturas = data;
        });

    return this.coberturas;
}

Class Coverage

export class Coberturas{
    codigoPlanoContratacao: string
    codigoCobertura: number
    descricaoCobertura: string
    codigoTipoRisco: number
    valorImportanciaSegurada: number
    valorPremioLiquido: number
}

componenet.ts

  public coberturas: Coberturas[];

  constructor(public coberturasServices: CoberturasServices) { 
    this.coberturas = this.coberturasServices.retornarListaDetalhe();
    }

html

But in Debugger, I can see my object list, however I can’t get popular in my variable. I tried adding objects in the returned data and I did not succeed, as it informs that my variable is Undefined.

Thank you again.

Answer 1

Instead of returning the value return an observable in your service:

TodasCoberturas(): Observable<Coberturas[]> {
  return this.http.get<Coberturas[]>(this.UrlServiceV1 + "combinadoPlano?codigoTipoRisco=1")
    .pipe(map(response => response.data));
}

Change the value type of the cover attribute to Observable in its component:

public coberturas$: Observable<Coberturas[]>;

  constructor(public coberturasServices: CoberturasServices) { 
    this.coberturas$ = this.coberturasServices.retornarListaDetalhe();
    }

Use async pipe in your template. That way the angle will subscribe and unsubscribe automatically.

<ng-container *ngIf="coberturas$ | async as coberturas">
  <!-- o seu codigo aqui -->
  <div *ngFor="let cobLinhas of coberturas">... </div>
</ng-container>

Answer 2

The list in json is inside an object, so you cannot map that json directly to the Covers array[].

First you create the following class

export class RootObject {
    sucess: boolean;
    message: string;
    data: Coberturas[];
}

Then change the request to

private pedeListaDetalhe() {
        this.http.get<RootObject>(this.UrlServiceV1 + "combinadoPlano?codigoTipoRisco=1")   
        .subscribe(result => {
            this.coberturas = result.data;
        });
    }

A practical example of this working is the following:

@Component({
    template: `
        <div *ngFor="let cobertura of coberturas">
            <!-- coloca o resto do html aqui -->
        </div>
    `
})
export class CoberturasComponent implements OnInit {

    coberturas: Coberturas[];

    ngOnInit(): void {
        this.pedeListaDetalhe();
    }

    private pedeListaDetalhe() {
        this.http.get<RootObject>(this.UrlServiceV1 + "combinadoPlano?codigoTipoRisco=1")   
        .subscribe(result => {
            this.coberturas = result.data;
        });
    }
}

Answer 3

You can try something like this by changing it to this:

in service

todasCoberturas() : Coberturas[] {
       return this.http.get<PayloadCobertura>(\`${this.UrlServiceV1}combinadoPlano? 
                       codigoTipoRisco=1`).pipe(map(res => res.data));
    }

interface

export interface Coberturas{
    codigoPlanoContratacao: string
    codigoCobertura: number
    descricaoCobertura: string
    codigoTipoRisco: number
    valorImportanciaSegurada: number
    valorPremioLiquido: number
}

export interface PayloadCobertura {
  sucess: boolean;
  message: string;
  data: Coberturas[];
}

on the Component

private pedeListaDetalhe() {
  this.yourService.todasCoberturas.subscribe(res => {
    this.coberturas = res;
  });
}

Answer 4

Thank you for all the answers, however I only manage using another method to popular my empty object.

What I can’t understand, why I can’t popular my object within the subscribe, because every time I leave within the subscribe, my "item" object becomes empty. During some testing, this was the solution that worked.

  //#region Consultar Combinado de Planos
    ConsultarItem(){
      this.limparItens();
      this.service.consultarItem(this.codItem)
      .subscribe(
                result  => {
                this.item = result.data;
                this.processarDados(this.Item)
            });
    }

     //Popular objeto rtornado do services 
     processarDados(item: Item[]){
      this.Item = item;
    }
    //#endregion