title: Display values from API In Angular 6 page
body: <p>I am completely new to frontend dev and trying to display API data in an Angular 6 application and can't figure out how to do it.</p>
  
  <p>I can display values in the top level of the returned details but it's the sub level details I am struggling with.</p>
  
  <p>I am using an Angular 6 app using Routing.</p>
  
  <p>Below is all my code</p>
  
  <p><em>Homepage.component.html</em></p>
  
  <pre><code>&lt;h2&gt;Book ID List&lt;/h2&gt;
  
  &lt;button (click)="getBooks()"&gt;Get&lt;/button&gt;
  
  &lt;div *ngFor="let book of books.items"&gt;
    &lt;p&gt;ID: {{book.id}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can get the 'ID'</p>
  
  <p><a href="https://i.stack.imgur.com/BOKu7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BOKu7.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/RhN3r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RhN3r.png" alt="enter image description here"></a></p>
  
  <p>I am using a <code>service</code> to get the data from the test <code>API</code></p>
  
  <p><strong>Service.component.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable, of } from 'rxjs';
  import { map } from 'rxjs/operators';
  
  @Injectable({
    providedIn: 'root'
  })
  
  export class ApiServiceService {
    url = 'https://www.googleapis.com/books/v1/volumes?q=HTML5  Wire-frames';
  
    constructor(private http: HttpClient) { }
  
    private extractData(res: Response) {
      const body = res;
      return body || {};
    }
  
    getBooks(): Observable&lt;any&gt; {
      return this.http.get(this.url).pipe(
        map(this.extractData));
    }
  }
  </code></pre>
  
  <p><strong>Homepage.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ApiServiceService } from '../../services/api-service.service';
  
  @Component({
    selector: 'app-homepage',
    templateUrl: './homepage.component.html',
    styleUrls: ['./homepage.component.css']
  })
  export class HomepageComponent implements OnInit {
    books: any = [];
  
    constructor(private apiService: ApiServiceService) { }
  
    ngOnInit() { }
  
    getBooks() {
      this.books = [];
      this.apiService.getBooks().subscribe((data: {}) =&gt; {
        console.log(data);
        this.books = data;
      });
    }
  }
  </code></pre>
  
  <p>At present this return the following:</p>
  
  <p><a href="https://i.stack.imgur.com/VdG22.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VdG22.png" alt="enter image description here"></a></p>
  
  <p>What I want to do is display the value from the 'eBook' which is under the 'saleInfo' level. I know I need to the change the loop for each <code>array</code> returned in the HTML but this is where I'm stuck.</p>
  
  <p>Also I'm not sure the code I have is the best, but it's working.  As I said I'm new to all this, and can pull values from top level but not sublevels in the API.</p>