Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Angular 17 nothing showing when calling API observable and subscription

Working on an Angular 17 project and I’m trying to get back the auctions that have auctionParmas or none at all. I can see the data values coming back in the dev tools response tab but when I console.log the this.auctions it comes back undefined. I have to be missing a very simple step here. The URL works just fine because I can call it in another browser tab http://localhost:7001/api/auctions. Image below show the response tab in the dev tools.

I’ve been messing around with it from when I originally posted this and I can console.log(response); and see the array of data. How every when I get to the html component, the *ngFor="let auction of auctions" seems not to be working.

enter image description here

Auction Interface

export interface Auction {
  reservePrice: number
  seller: string
  winner?: string
  soldAmount: number
  currentHighBid: number
  createdAt: string
  updatedAt: string
  auctionEnd: string
  status: string
  make: string
  model: string
  year: number
  color: string
  mileage: number
  imageUrl: string
  id: string
}

export class Auction implements Auction {}

Pagination Interface:

export interface Pagination<T> {
  pageIndex: number;
  pageSize: number;
  count: number;
  data: T;
}

Service:

getAuctionsList(auctionParams: AuctionParams) {
  let params = new HttpParams();

  params = params.append('pageIndex', auctionParams.pageNumber);
  params = params.append('pageSize', auctionParams.pageSize);

  return this.http.get<Pagination<Auction[]>>(this.auctionUrl + 'auctions',{params});
}

Component:

export class AuctionListComponent implements OnInit {

  auctions: Auction[] = [];
  auctionParams = new AuctionParams();
  totalCount = 0;

  constructor(private auctionService: AuctionListService) { }

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

  getAuctions() {
    this.auctionService.getAuctionsList(this.auctionParams).subscribe({
      next: response => {
         console.log(response); // shows data array in console
         this.auctions = response.data;
         console.log(this.auctions); // shows undefined
        this.auctionParams.pageNumber = response.pageIndex;
        this.auctionParams.pageSize = response.pageSize;
        this.totalCount = response.count;
      },
      error: error => console.log(error)
    })
  }
}

enter image description here

html component:

// In the browser nothing is showing below
<div class="m-3" *ngFor="let auction of auctions">

<div class="card mb-3" style="max-width: 540px;">
    <div class="row g-0">
        <div class="col-md-4">
        <img src="{{ auction.imageUrl }}" class="img-fluid rounded-start" alt="...">
        </div>
        <div class="col-md-8">
            <div class="card-body">
                <h5 class="card-title">{{ auction.year }} {{ auction.make}} {{auction.model}}</h5>
                <p class="card-text">High bid: {{ auction.currentHighBid }}</p>
                <p class="card-text">Milage: {{ auction.mileage }}</p>
                <p class="card-text">
                        End Date: {{ auction.auctionEnd | date }}    
                </p>                   
                                                            
                <app-timer [childTimer]="auction.auctionEnd"></app-timer>                                         
                
                <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
            </div>
        </div>
    </div>    
</div>
Tags:

2

Answers


  1. 0

    Your array is not in response.data. Try this.auctions = response.

    Login or Signup to reply.
  2. 0

    As you want to received an object type Pagination<Auction[]> and you only received the "data" you can use map in your service ( * )

    return this.http.get<Auction[]>(this.auctionUrl + 'auctions',{params}).pipe(
 map(res:Auction[])=>({
   pageIndex: auctionParams.pageNumber;
   pageSize: pageSize: number;
   count: ???? //<--in any way you need the total elements, your API don't serve it
   data:res,
}))

    I imagine you have another API url (In the code auctionTotalUrl that you get it, so your service can be

    return forkJoin([
   this.http.get<Auction[]>(this.auctionUrl + 'auctions',{params}),
   this.http.get<Auction[]>(this.auctionTotalUrl + 'auctions',{params})
   ])
.pipe(
 map([res,total]:[Auction[],number])=>({
   pageIndex: auctionParams.pageNumber;
   pageSize: pageSize: number;
   count: total
   data:res,
}))

    NOTE: Angular not check if the data you received is the kind of elements we indicate when use httpClient.get<…>(). This only help to the "compilador" we want this value

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search