Error showing data with Observables in Angular

user_3367720 0
Viewed 39

I have this service in my Angular Project

getOfertas(): Observable<Oferta[]> {
return this.http.get<Oferta[]>(`${this.urlWebAPI}/ofertas`)
  .pipe(
    tap(data=>console.log('OfertasService-get(): ', data)
    ),
    catchError(this.handleError)
  )

}

That I use in my Angular Component.ts

ofertas:Oferta[]=[];

ngOnInit(): void {
 this.dataService.getOfertas()
.pipe(
  tap(item=>console.log(item))
 )
.subscribe(
  data=>{
    this.ofertas=data;
    this.ofertasOriginal=this.ofertas;
  }
 )
,err=>console.log(err),
()=>{};
}
}

And I want to see the result in my table inside this Component.html

<div class='table-responsive'>
      <table class='table'>
        <thead>
          <tr>
            <th>Id</th>
            <th>Id Presentada</th>
            <th>Descripción</th>
            <th>Organismo</th>
            <th>Fª Presentación</th>
            <th>Presupuesto</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let oferta of ofertas; let index=index">
            <td>{{oferta.id}}</td>
            <td>{{oferta.idPresentada}}</td>
            <td>{{oferta.descripcion}}</td>
            <td>{{oferta.id}}</td>
            <td>{{oferta.fechaPresentacionFulcrum}}</td>
            <td>{{oferta.id}}</td>
          </tr>
        </tbody>
      </table>
    </div>

But I get this result in console with the data obtained from the ASP.NEt Core web API but the error showed

error

In my Web API when I debug I see this result returned.

cotroller

that is, a List of Oferta Objects

But in Angular, I get an strange object

{$id:
 $values:[]
}

But If I use this ~$values to iterate I still see nothing

<tr *ngFor="let oferta of ofertas.$values; let index=index">

If I try to assign this

values

I want to use my ofertas variable ofertas:Oferta[]=[]

Here I have an example with the same problem; https://stackblitz.com/edit/angular-ivy-ymtnrw?file=src/app/app.component.html

Any idea, please?

Thanks

angular asp.net-core asp.net-web-api
2 Answers

The response itself is not an array but contains one.

You need to change your template to

<tr *ngFor="let oferta of ofertas.$values; let index=index">
user_81927190

As in my Web API I had to avoid the cycle object error I did it this way as explained in his blog by Felipe: https://gavilanch.wordpress.com/2021/05/19/corrigiendo-el-error-a-possible-object-cycle-was-detected-en-distintas-versiones-de-asp-net-core/?blogsub=confirming#subscribe-blog

but as he himself tells me this must be the reason why now I receive the values in Angular in that object with the array in its second property, so now I have to adapt my Angular models to that structure

new model

import { Oferta } from './oferta';

export interface OfertaModel{
  $id:string;
  $values:Oferta[];

}

service.ts

getOfertas(): Observable<OfertaModel> {
return this.http.get<OfertaModel>(`${this.urlWebAPI}/ofertas`)
  .pipe(
    tap(data => console.log('OfertasService-getOfertas(): ', data)
    ),
    catchError(this.handleError)
  )

}

component.ts

this.dataService.getOfertas()
.pipe(
  tap(item=>console.log(item))
)
.subscribe(
  data=>{
    this.ofertas=data.$values;
  }
)
,err=>console.log(err),
()=>{};

component.html

<tr *ngFor="let oferta of ofertas; let index=index">

Thanks

user_33677200
Related