Error trying to diff '[object Object]' in Angular Error trying to diff '[object Object]' in Angular angular angular

Error trying to diff '[object Object]' in Angular


Your extractData (and possibly also your HTTP API) is returning an object {} - ngFor requires an array [] to iterate.

Change your service/API to produce an array, or transform the object in your component.


The problem (for me) was in my newState definition. Below is the correct definition:

const newState = (state, newData) => {    return Object.assign([], state, newData);}

My newState was converting my array to an object because I was using the wrong brackets - the Wrong Way is below.

const newState = (state, newData) => {    return Object.assign({}, state, newData);}

Good luck, I hope that helps,Rob


I ran into this issue when I changed the WebApi I was calling to return a Task<IActionResult> instead of the previous IEnumerable<object>. Check the response isn't wrapped in an object. I had to change my extractData method to:

private extractData(res: Response) {   let body = res.json();   return body.result || body || { };}