Angular 5 Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

Question

I have a list group which gets data from a rest service using HttpClient Post method.

I get "Cannot find a differ supporting object error" intermittently. But when I refresh the browser the data is displayed and if I try to switch between compoenents, I can still see the data. But after 10 mins or so if I click try to access any component on the page, I get above error.

Below is my code. Can you help me identifying what I am doing wrong?

component.html

<div class="list-group">
        <a
          routerLinkActive="active"
          routerLink="/home/switchroles/{{ account.acc_name }}"
          class="list-group-item list-group-item-action pl-1 pr-1 pt-1 pb-0 rounded-0"
          *ngFor="let account of allAccounts">{{ account.acc_dname }}
          <!--<span class="badge badge-pill badge-dark float-right">{{ account.Roles.length }}</span>-->
        </a>
      </div>

component.ts

export class SwitchRolesComponent implements OnInit {
  allAccounts: Account[] = [];
  accountsCount: number;
  loading: boolean;

  constructor(private http: HttpClient, private dataservice: DataService) {
    this.loading = true;
  }

  ngOnInit() {
    this.dataservice.getAllAccounts().subscribe(
      res => {
        this.allAccounts = res;
        this.accountsCount = res.length;
        this.loading = false;
      },
      err => {
        console.log('Error Occoured');
        console.log(err);
      }
    );
  }
}

getAllAccounts function from a dataservice

getAllAccounts(): Observable<Account[]> {
    return this.http.post<Account[]>('https://rest-url/Prod/getdata', {
      'operation': 'SelectFromMySQLDB',
      'data': {
        'query': 'select query here'
      }
    });
  }

Account Class

export class Account {
  constructor(
    public acc_name: string,
    public acc_dname: string,
    public acc_number: string,
    public acc_roles: string,
    public acc_desc: string,
  ) {}
}

Edit: Pring {{ allAccounts | json }}

[
    {
        "idawsaccounts": 11,
        "acc_name": "test1",
        "acc_dname": "Test1",
        "acc_number": "123456789",
        "acc_roles": "Test roles",
        "acc_desc": "Test Desc"
    },
    {
        "idawsaccounts": 12,
        "acc_name": "test2",
        "acc_dname": "Test2",
        "acc_number": "123456789",
        "acc_roles": "Test roles",
        "acc_desc": "Test Desc"
    },
    {
        "idawsaccounts": 13,
        "acc_name": "test3",
        "acc_dname": "Test3",
        "acc_number": "123456789",
        "acc_roles": "Test roles",
        "acc_desc": "Test Desc"
    }
]

I think that the object you received in your response isn't an array. — Joseph Charles
I am receiving an array of Objects of type Account defined in my account class. — Prasad Domala
Try to print only allAccounts in template with json pipe. Ex: {{allAccounts | json}} and see what happens. Remove all the template. Just print allAccounts — Ashraful Islam
ngFor only supports Iterates such as Array, so you cannot use it for Object — Joseph Charles

Prasad Domala Prasad Domala · Accepted Answer · 2018-01-10T14:07:37

Edit - Solved

The issue is not with the Java Script code and you guys were right, I am not iterating an array when error occured.

The issue is with the backend rest service. If the backend function is successful it returns an array of objects. But for some reason if it fails it returns a JSON object and that is when I get this error which is genuine.

Now I need to fix my backend service to callback an array even when it fails or check for the return value in my Angular code and iterate only if it is an array. If it is a JSON object I need to display an error message.

Thanks a lot for your inputs.

Angular 5 Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

2 Answers