Angular 7 - Popular object in return API service. httpClient

Question

Angular 7 - Popular object in return API service. httpClient

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Thank you in advance for your attention.

I'm having trouble popularizing an object list returned from an API in Angular 7. My service class is returning service data, however I can not popular in my object list (returned from service). Below is the 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;
}

Coverage Class

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

Butindebugger,Icanviewmyobjectlist,howeverIcannotseemtobepopularinmyvariable.IalreadytriedtoperformaforaddingobjectstothereturneddataandIwasnotsuccessful,sinceitinformsthatmyvariableisundefined.

Thanks again.

typescript services httpclient angularjs-services angular-6

asked by anonymous 04.12.2018 / 03:05

2 answers

How to write a tabular file in an instance of the Azure Data Lake Store with the Python API? Django 2.0.9 - docker-compose up - creation of super user

score 0 · Answer 1

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

First you create the following class

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

Then change the order to

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

A practical example of this to work is as follows:

@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

Thanks for all the answers, but I only get to use another method to populate my empty object.

What I can not understand, for which reason I can not populate my object within subscribe, because every time I exit inside the subscribe, my "item" object is 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