Angular: Cannot find a differ supporting object '[object Object]'
I think that the object you received in your response payload isn't an array. Perhaps the array you want to iterate is contained into an attribute. You should check the structure of the received data...
You could try something like that:
getusers() {
this.http.get(`https://api.github.com/search/users?q=${this.input1.value}`)
.map(response => response.json().items) // <------
.subscribe(
data => this.users = data,
error => console.log(error)
);
}
Edit
Following the Github doc (developer.github.com/v3/search/#search-users), the format of the response is:
{
"total_count": 12,
"incomplete_results": false,
"items": [
{
"login": "mojombo",
"id": 1,
(...)
"type": "User",
"score": 105.47857
}
]
}
So the list of users is contained into the items
field and you should use this:
getusers() {
this.http.get(`https://api.github.com/search/users?q=${this.input1.value}`)
.map(response => response.json().items) // <------
.subscribe(
data => this.users = data,
error => console.log(error)
);
}
I received this error in my code because I'd not run JSON.parse(result).
So my result was a string instead of an array of objects.
i.e. I got:
"[{},{}]"
instead of:
[{},{}]
import { Storage } from '@ionic/storage';
...
private static readonly SERVER = 'server';
...
getStorage(): Promise {
return this.storage.get(LoginService.SERVER);
}
...
this.getStorage()
.then((value) => {
let servers: Server[] = JSON.parse(value) as Server[];
}
);
Missing square brackets around input property may cause this error. For example:
Component Foo {
@Input()
bars: BarType[];
}
Correct:
<app-foo [bars]="smth"></app-foo>
Incorrect (triggering error):
<app-foo bars="smth"></app-foo>
Something that has caught me out more than once is having another variable on the page with the same name.
E.g. in the example below the data for the NgFor
is in the variable requests
.
But there is also a variable called #requests
used for the if-else
<ng-template #requests>
<div class="pending-requests">
<div class="request-list" *ngFor="let request of requests">
<span>{{ request.clientName }}</span>
</div>
</div>
</ng-template>
This ridiculous error message merely means there's a binding to an array that doesn't exist.
<option
*ngFor="let option of setting.options"
[value]="option"
>{{ option }}
</option>
In the example above the value of setting.options is undefined. To fix, press F12 and open developer window. When the the get request returns the data look for the values to contain data.
If data exists, then make sure the binding name is correct
//was the property name correct?
setting.properNamedOptions
If the data exists, is it an Array?
If the data doesn't exist then fix it on the backend.