access array inside array in angular 4

Question

I'm using angular to create a web project that uses google's custom search engine to populate the web pages with the first ten results returned. The data I get back from the API is in JSON format which I can assess and display using an interface. I'm able access the array "items", my problem is I don't know how to access the array inside the items array. Any help is welcome. Ps. i'm new to angular.

  interface ISite{
    kind: string;
    title: string;
    htmlTitle: string;
    link: string;
    displayLink: string;
    srcImage: string;
    snippet: string;
}

  //Second interface to deal the api
  interface ISearchResponse {
  kind: string;
  context: string;
  items: ISite[];
  cse_images: string;
  company: string;
  snippet: string;
}

//and my service
  constructor(private _http: HttpClient) { }

   getSites(): Observable<ISearchResponse> {
    return this._http.get<ISearchResponse>(this._siteURL)
      .do(data => console.log('All: ' + JSON.stringify(data)))
      .catch(this.handleError);

  }
  private handleError(err: HttpErrorResponse) {
    console.log('SearchEngineService: ' + err.message);
    return Observable.throw(err.message);
  }
}

    //My html
    <h2>Search Results</h2>
<div class="list-group" *ngFor='let site of sites.items'>
  <a href="{{site.link}}" class="list-group-item list-group-item-action flex-column align-items-start active" >
    <div class="d-flex w-100 justify-content-between">
      <h4 class="mb-1">Title:  {{site.title}}</h4>
    </div>
    <h5>URL: {{site.link}}</h5>
    <p class="mb-1">Description: {{site.snippet}}</p>
  </a>
</div>

sample of the data form google api, I want to access the image in cse_image

 "items": [
        {
            "kind": "customsearch#result",
        "title": "Sports News,Scores,Schedules,Standings,Stats,Photos",
            "pagemap": {
                "cse_image": [
                    {
                        "src": image.jpg"
                    }
                ]
            }
        },

Possible duplicate of [Access / process (nested) objects, arrays or JSON](https://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) — Heretic Monkey, Nov 17 '17 at 22:06

score 0 · Answer 1 · answered Nov 17 '17 at 21:56

Try this:

<h2>Search Results</h2>
    <div class="list-group" *ngFor='let site of sites.items'>
      <a href="{{site.link}}" class="list-group-item list-group-item-action flex-column align-items-start active" >
        <div class="d-flex w-100 justify-content-between">
          <h4 class="mb-1">Title:  {{site.title}}</h4>
        </div>
        <h5>URL: {{site.link}}</h5>
        <p class="mb-1">Description: {{site.snippet}}</p>
    <img src={{site.pagemap.cse_image[0].src}}>
      </a>
    </div>

access array inside array in angular 4

1 Answers1