Angular 6 Error trying to diff '[object Object]'. Only arrays and iterables are allowed
In your service map operator must return data.result
getwikiList() {
return this.http.get(this.wikiApiUrl + "/list")
.pipe(map((data: any) => data.result ),
catchError(error => { return throwError('Its a Trap!')})
);
}
Just update p-table like this
<p-table [value]="wikiList">
<ng-template pTemplate="header">
<tr>
<th>Begriff</th>
<th>Beschreibung</th>
<th>Schlagworte</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-wikiList>
<tr>
<td>{{wikiList.title}}</td>
<td>{{wikiList.text}}</td>
<td>{{wikiList.keyWords}}</td>
</tr>
</ng-template>
</p-table>
stackblitz example
Keep in mind that Http is asynchronous. That means with this code:
getwikiItems(): void {
this.knowledgebaseService.getwikiList().subscribe(
data => {
this.wikiList = data
},
err => console.error(err),
() => console.log('Wiki Items Geladen')
);
console.log(this.wikiList) // <-- ALWAYS UNDEFINED!!
}
The last console.log line will always be undefined.
The flow is as follows:
1) The getwikiList().subscribe is called.
2) The Http Get request is executed.
3) The getwikiList() method returns.
4) Your console.log is executed and the value is undefined at this point.
5) A response is received from the Get request.
6) The method defined within the subscribe method is notified and the data is provided and set to the this.wikilist.
So it is only after step 6 that you have the data.
If you want to see your values, you need to move your logging within the subscribe as shown below:
getwikiItems(): void {
this.knowledgebaseService.getwikiList().subscribe(
data => {
this.wikiList = data;
console.log(this.wikiList); // <-- here instead
},
err => console.error(err),
() => console.log('Wiki Items Geladen')
);
}
You can also do the below:
getwikiList() {
return this.http.get(this.wikiApiUrl + "/list")
.pipe(map((data: any) => data.result || [];
}), catchError(error => {
return throwError('Its a Trap!')
})
);
It worked for me