Angular 7-Popular object in API service return. httpClient

Question

Angular 7-Popular object in API service return. httpClient

I thank you for your attention.

I'm having trouble populating a list of object returned from an API in Angular 7. My service class is returning the data from the service, but I can't populate it in my object list (returned from the service). Below follows 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

Put in the debugger, I can view my object list, however I can't popular in my variable. I have already tried to perform a for by adding objects in the returned data and had no success, as it reports that my variable is undefined.

Thank you again.

0

typescript httpclient services angularjs-services angular-6

Author: Bruno Leite, 2018-12-04

Source

4 answers

score 0 · Answer 1

The list in json is inside an object, so you can't map that json directly to the array covers [].

First you create the following class

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

Then changes 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;
        });
    }
}

score 0 · Answer 2

Thank you for all the answers, but I only get by using another method to populate my empty object.

What I can't understand, why I can't populate my object inside subscribe, because every time I exit inside subscribe, my "item" object gets 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

score 0 · Answer 3

You can try something like this by changing to this:

No 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[];
}

No component

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

score 0 · Answer 4

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 type of the coverage attribute value to Observable in your component:

public coberturas$: Observable<Coberturas[]>;

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

Use async pipe in your template. This way angular will automatically subscribe and unsubscribe.

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