When I console log my .then() function, it only gives me an observable. How can I retrieve the actual data that is being returned?
I've been struggling to solve my async/await issue and haven't been able to figure out a solution. Currently, my page loads first and then the data comes in, leading to an error being thrown in the console. The data eventually arrives, but not before the error occurs.
This is the component ts code snippet:
async getGames() {
await this.games.getAllGames(this.currentPage).then(game => {
this.gamesArray = game;
});
}
This is from my service file:
async getAllGames(page) {
console.log('11111111111111');
const queryParams = `?page=${page}`;
return await this.http.get(this.url + queryParams);
}
This is my HTML:
<div class="col-lg-9 float-right">
<div class="row">
<div class="col-lg-6 card-background" *ngFor="let game of gamesArray.games">
<div class="card-surround shadow-sm">
<div>
<h2>{{game.homeTeam.teamName}}</h2>
<h2>{{game.awayTeam.teamName}}</h2>
<canvas id="{{game.id}}"></canvas>
<hr>
<p>{{game.gameTime}}</p>
</div>
</div>
</div>
</div>
<ngb-pagination class="d-flex justify-content-end"
size="sm"
[collectionSize]="gamesArray.games.length"
[(page)]="currentPage"
[maxSize]="5"
[pageSize]='6'
[rotate]="true"
[ellipses]="false"
[boundaryLinks]="true"
(pageChange)='onPageChange($event)'>
</ngb-pagination>
</div>
The issue is that the 'game' variable in the .then() function is returning an observable instead of the expected data from the server/database.