Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Question

I am getting the following error

"ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed" during runtime.

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

JSON webservice

{
  "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"
  }]
}

post.model.ts

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

post.service.ts

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) => {
      return resp.json()

    })
  }
}

app.component.ts

import {
  Component
} from '@angular/core';
import {
  PostsService
} from './posts.service';
import {
  Posts
} from './post.model';

@Component({
  selector: 'app-root',
  template: ` <
h1 > {
    {
      title
    }
  } < /h1> <
  table border = "1"
class = "colwidth" >
  <
  tr >
  <
  th > action < /th> <
  th > btl_count < /th> <
  th > created_user_nm < /th> <
  th > modified_dt < /th> <
  th > order_sales_rep_cuid < /th> <
  th > qoa_prd_envlp_instance_id < /th> <
  th > qoa_sales_order_id < /th> <
  th > status_cd < /th> <
  th > submit_status_cd < /th> <
  /tr> <
  tr * ngFor = "let data of DataArray" >
  <
  td > {
    {
      data.action
    }
  } < /td> <
  td > {
    {
      data.btl_count
    }
  } < /td> <
  td > {
    {
      data.created_user_nm
    }
  } < /td> <
  td > {
    {
      data.modified_dt
    }
  } < /td> <
  td > {
    {
      data.order_sales_rep_cuid
    }
  } < /td> <
  td > {
    {
      data.qoa_prd_envlp_instance_id
    }
  } < /td> <
  td > {
    {
      data.status_cd
    }
  } < /td> <
  td > {
    {
      data.submit_status_cd
    }
  } < /td> <
  /tr> <
  /table>`,
  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 => {
        this.DataArray = data;
        console.log(data)
      },
      (error) => console.log(error),
      () => console.log("Complete")
    )
  }

  ngOnInit() {
    this.getPeople();
  }
}

Answer 1

It looks like your response information is returned in the format of:

resp = {"data": [<list of properties>]}

returning resp.json() to the component to iterate, but the response itself is not an array. Try returning resp.json().data, which should send the array portion of the response.

Answer 2

You could have also just added '.data' on this line, 'in tr * ngFor = "let data of DataArray.data" >`