Как получить доступ ко всем данным в вызове API

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>

Хорошо, поэтому приведенный выше код вызывает API, а API возвращает объект с вложенными массивами, чтобы получить информацию, которую я хочу, чтобы я определил данные как data.results.книги, но есть данные, к которым я хочу получить доступ в data.results. Я пытался просто выделить часть .books, но NGFOR не работает с объектами, есть ли способ сохранить или даже получить данные в data.results и какя бы сохранил это

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>

Если вы не подписываетесь, используйте async pipe в html

<div *ngFor="let name of names | async;  let i = index"> 
    ......
</div>

Answer 2

Попробуйте обновить *ngFor с помощью асинхронного канала. Вам нужно использовать async pipe, потому что httpClient всегда возвращает Observable.

<div *ngFor="let name of names | async; let i = index"></div>

Также обновите getNames и удалите .pipe оттуда

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);
 }