title: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
body: <p>I am getting the following error </p>
  
  <blockquote>
    <p>"<strong>ERROR Error: Error trying to diff '[object Object]'. Only arrays
    and iterables are allowed</strong>" during runtime.</p>
  </blockquote>
  
  <p>I am consuming a JSON response and attempting to display it in the UI in tables format. please find the attached code and let me know what is the mistake in the code which I have made</p>
  
  <p><strong><code>JSON webservice</code></strong></p>
  
  <pre><code>{
    "data": [{
      "action": "ok",
      "btl_count": 2,
      "created_user_nm": "jyjohn2",
      "modified_dt": "Wed, 04 Apr 2018 14:32:10 GMT",
      "order_sales_rep_cuid": "jyjohn2",
      "qoa_prd_envlp_instance_id": 7363849,
      "qoa_sales_order_id": 238196381,
      "status_cd": "SUB_TO_OEC",
      "submit_status_cd": "BK_GLOBAL_F"
    }]
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/0r0Nz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0r0Nz.png" alt="enter image description here"></a></p>
  
  <p><strong><code>post.model.ts</code></strong></p>
  
  <pre><code>export interface Posts {
    //userid:number;
    //id:number;
    //title:string;
    //body:string;
    action: string;
    btl_count: number;
    created_user_name: string;
    modified_dt: Date;
    order_sales_rep_cuid: string;
    qoa_prd_envlp_instance_id: number;
    qoa_sales_order_id: number;
    status_cd: string;
    submit_status_cd: string;
  }
  </code></pre>
  
  <p><strong><code>post.service.ts</code></strong></p>
  
  <pre><code>import {
    Injectable
  } from '@angular/core';
  import {
    Posts
  } from './post.model';
  import {
    Http
  } from '@angular/http';
  import 'rxjs/Rx';
  
  @Injectable()
  export class PostsService {
    serviceURL: string = "URL(not mentioning the URL for security reason)"
    constructor(private http: Http) {}
    getPosts() {
  
      return this.http.get(this.serviceURL).map((resp) =&gt; {
        return resp.json()
  
      })
    }
  }
  </code></pre>
  
  <p><strong><code>app.component.ts</code></strong></p>
  
  <pre><code>import {
    Component
  } from '@angular/core';
  import {
    PostsService
  } from './posts.service';
  import {
    Posts
  } from './post.model';
  
  @Component({
    selector: 'app-root',
    template: ` &lt;
  h1 &gt; {
      {
        title
      }
    } &lt; /h1&gt; &lt;
    table border = "1"
  class = "colwidth" &gt;
    &lt;
    tr &gt;
    &lt;
    th &gt; action &lt; /th&gt; &lt;
    th &gt; btl_count &lt; /th&gt; &lt;
    th &gt; created_user_nm &lt; /th&gt; &lt;
    th &gt; modified_dt &lt; /th&gt; &lt;
    th &gt; order_sales_rep_cuid &lt; /th&gt; &lt;
    th &gt; qoa_prd_envlp_instance_id &lt; /th&gt; &lt;
    th &gt; qoa_sales_order_id &lt; /th&gt; &lt;
    th &gt; status_cd &lt; /th&gt; &lt;
    th &gt; submit_status_cd &lt; /th&gt; &lt;
    /tr&gt; &lt;
    tr * ngFor = "let data of DataArray" &gt;
    &lt;
    td &gt; {
      {
        data.action
      }
    } &lt; /td&gt; &lt;
    td &gt; {
      {
        data.btl_count
      }
    } &lt; /td&gt; &lt;
    td &gt; {
      {
        data.created_user_nm
      }
    } &lt; /td&gt; &lt;
    td &gt; {
      {
        data.modified_dt
      }
    } &lt; /td&gt; &lt;
    td &gt; {
      {
        data.order_sales_rep_cuid
      }
    } &lt; /td&gt; &lt;
    td &gt; {
      {
        data.qoa_prd_envlp_instance_id
      }
    } &lt; /td&gt; &lt;
    td &gt; {
      {
        data.status_cd
      }
    } &lt; /td&gt; &lt;
    td &gt; {
      {
        data.submit_status_cd
      }
    } &lt; /td&gt; &lt;
    /tr&gt; &lt;
    /table&gt;`,
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'app';
    //objectKeys = Object.keys;
    //objPosts:Posts;
    DataArray: any = [];
    constructor(private postsService: PostsService) {
  
    }
    getPeople(): void {
      this.postsService.getPosts().subscribe(
        data =&gt; {
          this.DataArray = data;
          console.log(data)
        },
        (error) =&gt; console.log(error),
        () =&gt; console.log("Complete")
      )
    }
  
    ngOnInit() {
      this.getPeople();
    }
  }
  </code></pre>