I got trouble when fetched from the database. Show this error in my console “Error trying to diff ‘[object Object]’. Only arrays and iterables are allowed”.
I want to fetch data by id or username.
this is my JSON :
{ id: "362a7e6c-8804-11ea-8211-00ffc8371d5a", content: "blablabla", roomid: "RM001", roomname: "IT GROUP", username: "JUSER", …}
content: "blablabla"
createdby: "0878668888"
createdon: "2020-04-26T21:23:45.000Z"
id: "362a7e6c-8804-11ea-8211-00ffc8371d5a"
modifiedby: "0878668888"
modifiedon: "2020-04-26T21:23:45.000Z"
roomid: "RM001"
roomname: "IT GROUP"
username: "JUSER"
__proto__: Object
my providers (chat-list-provider.ts) :
getChatById(username) {
return new Promise((resolve,reject) => {
let header = new Headers();
header.append('Content-Type', 'application/json');
this.http.get('http://localhost:3001/api/messages/' + username, {headers: header})
.map(res => res.json())
.subscribe(_data => {
resolve(_data);
}, err => {
reject(err);
})
})
}
chat-list.ts
export class ChatListPage {
public items: any = [];
username = 'JUSER';
constructor(
public navCtrl: NavController,
public navParams: NavParams,
private socket: Socket,
public chatListService: ChatListProvider,
public modalCtrl: ModalController,
public toastCtrl: ToastController,
public http: Http) {
}
ionViewDidLoad() {
this.getChatById(this.username);
}
getChatById(username) {
this.chatListService.getChatById(username)
.then((res) => {
console.log(res);
this.items = res;
console.log(this.items);
})
}
My View :
<ion-content fullscreen>
<ion-list>
<ion-list-header>
Conversations
</ion-list-header>
<ion-item *ngFor="let item of items" (click)="openMessage()">
<ion-avatar slot="start">
<img src="./avatar-finn.png">
</ion-avatar>
<ion-label>
<h2>{{ item.roomname }}</h2>
<p>{{ item.content }}</p>
</ion-label>
</ion-item>
</ion-list>
</ion-content>
Please inform me if you found any wrong in my codes. Thanks