title: Angular: Assign array from JSON object retrieved via API to a variable
body: <p>I am working on loading a blog feed via the Google Blogger API and displaying the results in a  component. I cannot figure out how to assign the { "items":[] } array to a posts variable to get the posts to display. Here is what I have:</p>
  
  <p>Component:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FeedService, Feed } from './feed.component.service';
  import { Observable } from 'rxjs/Observable';
  
  @Component({
  selector: 'feed',
  templateUrl: './feed.component.html',
  styleUrls: ['./feed.component.scss']
  })
  export class FeedComponent implements OnInit {
      constructor(private feedService: FeedService){ }
      feed: Feed;
      posts: string[];
  
      ngOnInit(){
          this.feed = this.feedService.loadFeed();
          this.posts = this.feed['items'];
      }
  }
  </code></pre>
  
  <p>the Service:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Response, Headers, RequestOptions } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import { Feed } from './feed.component.service';
  
  import 'rxjs/add/operator/map';
  
  export interface Feed {
      [key: string]: any;
  }
  
  @Injectable()
  export class FeedService {
      constructor(private http: Http){ }
      loadFeed(): Observable&lt;Feed&gt; {
          const headers = new Headers();
          headers.append('Content-Type', 'application/json');
  
          const options = new RequestOptions({ headers: headers });
  
          return this.http
              .get('https://www.googleapis.com/blogger/v3/blogs/3213900/posts?key=AIzaSyDDF7BymSIZjZKJ5x_FCLnV-GA1TbtIyNI', options)
              .map(response =&gt; response.json().data as Feed);
      }
  }
  </code></pre>
  
  <p>and the HTML(also using Bootstrap 4):</p>
  
  <pre><code>&lt;button class="btn back"&gt;Back&lt;/button&gt;
  &lt;div class="header"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;h1&gt;feed&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="post"&gt;
      &lt;div *ngFor="let post of posts"&gt;
          &lt;h1&gt; {{ post.title }} &lt;/h1&gt;
          &lt;p&gt; {{ post.content }} &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="footer"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The JSON returns with a key "items": [] that contains an array of objects for the posts. Within each post is a title and content key. I cannot get any posts to display. Any help is greatly appreciated.</p>