How to access all the data in the API call

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

we would need to have the structure of bookmodel in order to make any sense of this — jcuypers
– jcuypers, Commented Mar 12, 2019 at 9:11
Why don't you return results and do the ngFor on results.books? — Ignacio Lago
– Ignacio Lago, Commented Mar 12, 2019 at 9:13

skdonthi · Accepted Answer · 2019-03-12 09:21:03Z

2

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>

answered Mar 12, 2019 at 9:21

skdonthi

1,4721 gold badge22 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

joka00 · Accepted Answer · 2019-03-12 13:47:18Z

1

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

edited Mar 12, 2019 at 13:47

answered Mar 12, 2019 at 9:12

joka00

2,5771 gold badge12 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to access all the data in the API call

2 Answers 2

service.ts

component.ts

HTML

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

service.ts

component.ts

HTML

Comments

Comments

Related