How to access all the data in the API call - html

Question

getNames(): Observable<bookmodel[]> {
const endpoints = 'https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=xxxxxxxx';
return this.http.get(endpoints).pipe(
map(this.extractData));
}
<h1 class="uk-flex uk-flex-center">Top Books{{bestsellers_date}}</h1>
<hr class="uk-divider-icon">
<div class="uk-child-width-1-5#s uk-grid-match" uk-grid>
<div *ngFor="let name of names; let i = index">
<div class="uk-card uk-card-hover uk-card-body">
<h3 class="uk-card-title">{{name.title}}</h3>
<img style="height:250px;" src="{{name.book_image}}"><br/><br/>
<span>Summary: {{name.description || ' NA' |characters:150}}</span><br />
<hr class="uk-divider-icon">
<span>Author {{name.author}}</span>
<br/>
<br/>Best Sellers Rank {{name.rank}}
<br />
<span>Weeks on List {{name.weeks_on_list}}</span>
<div class="uk-card-footer">
<span><a class="uk-button uk-button-primary" href="{{name.amazon_product_url}}">Buy On Amazon</a></span>
</div>
</div>
</div>
</div>
Okay so the code above makes a call to the api and the api returns an object with nested arrays in order to get the infomation I want Ive put defined the data as data.results.books but theres data that I want to access in the data.results Ive tryed just taking the .books part out but the the NGFOR doesn't work with objects is there a way to store or even get the data in data.results and how would I store it

Answer 1

service.ts
getNames(): Observable<bookmodel[]> {
const endpoints = 'https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=7W3E72BGAxGLOHlX9Oe2GQSOtCtRJXAt';
return this.http.get<bookmodel[]>(endpoints);
}
component.ts
this.service.getNames().subscribe(names => this.names = names);
HTML
<div *ngFor="let name of names; let i = index">
......
</div>
If you are not subscribing it use async pipe in html
<div *ngFor="let name of names | async; let i = index">
......
</div>

Answer 2

Try updating the *ngFor with an async pipe. You need to use async pipe because httpClient always returns Observable.
<div *ngFor="let name of names | async; let i = index"></div>
Also update the getNames and remove the .pipe from there
getNames(): Observable<bookmodel[]> {
const endpoints = 'https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=7W3E72BGAxGLOHlX9Oe2GQSOtCtRJXAt';
return this.http.get<bookmodel[]>(endpoints);
}