时间戳

首页 > 解决方案 > 如何访问 API 调用中的所有数据

html - 如何访问 API 调用中的所有数据

问题描述

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.books，但是我想在数据中访问数据.results 我尝试将 .books 部分取出，但 NGFOR 不适用于对象有没有办法在 data.results 中存储甚至获取数据以及我将如何存储它

标签： htmlangular

解决方案

服务.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);
 }

组件.ts

this.service.getNames().subscribe(names =>  this.names = names);

HTML

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

如果您不订阅它，请async在 html 中使用管道

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

推荐阅读