问题
I looked at similar questions, but none of them helped me. I am going to receive an object like the following:
[
{
\"id\": 1,
\"name\": \"Safa\",
\"email\": \"neerupeeru@mail.ee\",
\"purpose\": \"thesis\",
\"programme\": \"Software Engineering\",
\"year\": 2016,
\"language\": \"Estonian\",
\"comments\": \"In need of correcting a dangling participle.\",
\"status\": \"RECEIVED\"
},
{
\"id\": 2,
\"name\": \"Safa\",
\"email\": \"neerupeeru@mail.ee\",
\"purpose\": \"thesis\",
\"programme\": \"Software Engineering\",
\"year\": 2016,
\"language\": \"Estonian\",
\"comments\": \"In need of correcting a dangling participle.\",
\"status\": \"RECEIVED\"
},
{
\"id\": 3,
\"name\": \"Salman\",
\"email\": \"neerupeeru@mail.ee\",
\"purpose\": \"thesis\",
\"programme\": \"Software Engineering\",
\"year\": 2016,
\"language\": \"Estonian\",
\"comments\": \"In need of correcting a dangling participle.\",
\"status\": \"RECEIVED\"
}
]
and here is my http service to receive it:
getRequest(){
return this._http.get(\"http://consultationwebserver.herokuapp.com/requests\").map(res => res.json());
}
and finally, in the i called the service in this way:
requests;
constructor(private _http:requestService){}
ngOnInit(){
this.requests=this._http.getRequest().subscribe(res=>this.requests=res);
}
Unfortunately, when the page loads it complains with:
Cannot find a differ supporting object \'[object Object]\' of type \'object\'. NgFor only supports binding to Iterables such as Arrays.
So, what is going wrong with this code?
回答1:
There you don't need to use this.requests= when you are making get call(then requests will have observable subscription). You will get a response in observable success so setting requests value in success make sense(which you are already doing).
this._http.getRequest().subscribe(res=>this.requests=res);
回答2:
Remove this.requests from
ngOnInit(){
this.requests=this._http.getRequest().subscribe(res=>this.requests=res);
}
to
ngOnInit(){
this._http.getRequest().subscribe(res=>this.requests=res);
}
this._http.getRequest() returns a subscription, not the response value.
The response value is assigned by the callback passed to subscribe(...)
回答3:
In your JSOn file, please make below change.
{
"data":
[
{
"id": 1,
"name": "Safa",
"email": "neerupeeru@mail.ee",
"purpose": "thesis",
"programme": "Software Engineering",
"year": 2016,
"language": "Estonian",
"comments": "In need of correcting a dangling participle.",
"status": "RECEIVED"
},
{
"id": 2,
"name": "Safa",
"email": "neerupeeru@mail.ee",
"purpose": "thesis",
"programme": "Software Engineering",
"year": 2016,
"language": "Estonian",
"comments": "In need of correcting a dangling participle.",
"status": "RECEIVED"
},
{
"id": 3,
"name": "Salman",
"email": "neerupeeru@mail.ee",
"purpose": "thesis",
"programme": "Software Engineering",
"year": 2016,
"language": "Estonian",
"comments": "In need of correcting a dangling participle.",
"status": "RECEIVED"
}
]
}
And after that:
this.http.get(url).map(res:Response) => res.json().data);
The data is actually the name of tge collection of json file. Please try the code above, I am sure it will work.
回答4:
You can declare the books (on line 2) as an array:
title: any = 'List of books are represted in the bookstore';
books: any = [];
constructor(private service: AppService){
}
ngOnInit(){
this.getBookDetails();
}
getBookDetails() {
this.service.getBooks().subscribe(books => {
this.books = books.json();
console.log(this.books);
});
}
回答5:
I had the same error because I have mapped the HTTP response like this:
this.http.get(url).map(res => res.json);
Note how I accidentally called .json like a variable and not like a method.
Changing it to:
this.http.get(url).map(res => res.json());
did the trick.
回答6:
My solution is create a Pipe for return the values array or propierties object
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'valueArray',
})
export class ValueArrayPipe implements PipeTransform {
// El parametro object representa, los valores de las propiedades o indice
transform(objects : any = []) {
return Object.values(objects);
}
}
The template Implement
<button ion-item *ngFor="let element of element_list | valueArray" >
{{ element.any_property }}
</button>
回答7:
i have the same problem. this is how i fixed the problem. first when the error is occurred, my array data is coming form DB like this --,
{brands: Array(5), _id: "5ae9455f7f7af749cb2d3740"}
make sure that your data is an ARRAY, not an OBJECT that carries an array. only array look like this --,
(5) [{…}, {…}, {…}, {…}, {…}]
it solved my problem.
回答8:
i have faced same problem
my initial json
{"items":
[
{"id":1,
"Name":"test4"
},
{"id":2,
"Name":"test1"
}
]
}
i have changed my json inside []
[{"items":
[
{"id":1,
"Name":"test4"
},
{"id":2,
"Name":"test1"
}
]
}]
回答9:
To iterate over an object which has a json format like below
{
"mango": { "color": "orange", "taste": "sweet" }
"lemon": { "color": "yellow", "taste": "sour" }
}
Assign it to a variable
let rawData = { "mang":{...}, "lemon": {...} }Create a empty array(s) for holding the values(or keys)
let dataValues = []; //For valueslet dataKeys = []; //For keysLoop over the keys and add the values(and keys) to variables
for(let key in rawData) { //Pay attention to the 'in' dataValues.push(rawData[key]); dataKeys.push(key); }Now you have an array of keys and values which you can use in *ngFor or a for loop
for(let d of dataValues) { console.log("Data Values",d); }<tr *ngFor='let data of dataValues'> ..... </tr>
回答10:
You should use async pipe. Doc: https://angular.io/api/common/AsyncPipe
For example:
<li *ngFor="let a of authorizationTypes | async"[value]="a.id">
{{ a.name }}
</li>
回答11:
For anyone else with this issue that arrives here via Google, please check that the host element of the *ngFor directive is accurate. By this, I mean that I encountered this error and spent a long time researching fixes before realizing that I had put the *ngFor on an ng-template element instead of on my component I wanted to repeat.
Incorrect
<ng-template *ngFor=let group of groups$ | async" ...>
<my-component [prop1]="group.key" ... </my-component>
<\ng-template>
Correct
<my-component *ngFor=let group of groups$ | async" [prop1]="group.key" ... </my-component>
I know this is an obvious mistake in hindsight, but I hope an answer here will save someone the headache I now have.
回答12:
this.requests=res here you are trying to assign following response to object,
{"headers":{"normalizedNames":{},"lazyUpdate":null},"status":200,"statusText":"OK",
"url":"xyz","ok":true,"type":4,"body":[{}]}
Since, object format is different then response format you have to assign res.body part from your response to get required contents.
回答13:
<ul>
<li *ngFor = "let Data of allDataFromAws | async">
<pre> {{ Data | json}}</pre>
</li>
</ul>
use async to convert allDataFromAws into Array Object....
回答14:
In you use spring boot with Angular ; make sure that whether you create default
回答15:
Just declare the var as an array in which you holding the data , it worked for me.
listingdata:Array<any> = [];
this.listingdata = data.results.rows;
and loop the listingdata on html page
回答16:
requests = [];
this.requests[0] =this._http.getRequest().subscribe(res=>this.requests=res);
and
*ngFor="let product of requests[0]"
来源：https://stackoverflow.com/questions/39819392/cannot-find-a-differ-supporting-object-object-object-of-type-object-ngfor