Multiple Data And [Object] [Object]

I use mongoDB, express, angular , nodejs

i have a 2 problems:

1) when I get the data from http i get to the subscribe function in the component [Object][Object]

2) I think that i have problem with the subscribe and the unsbscribe becuase I get in the start what i need to get but after when i do something I get Multiple data for example: if I have 2 pic of apple and banana After that it will be apple banana apple banana I want to see only 1 apple and 1 banana

component.component.ts


export class MealMenusComponent implements OnInit, OnDestroy {
menu: Menu[] = [];



ngOnInit() {
this.subscription = this.mlService.getMeal().subscribe(res => {
this.menu = res;
console.log(this.menu); ----------->> [Object][Object]
});


ngOnDestroy() {
this.subscription.unsubscribe();
}


}

service.service.ts


public getMeal() {
return this.http.get('http://localhost:3000/meals')
.pipe(
map(responseData => {
for (const key in responseData) {
if (responseData.hasOwnProperty(key)) {
this.menu.push({ ...responseData[key]}); /
}
}
console.log(this.menu); ----------->> print the data correctly
return this.menu;

})
);

menu.module.ts


export class Menu {

public name: string;
public description: string;
public imagePathFront: string;
public imagePathBack: string;
public category: string;
public price: number;


constructor(name: string, description: string, imagePathFront: string, imagePathBack: string, category: string, price: number) {
this.name = name;
this.description = description;
this.imagePathFront = imagePathFront;
this.imagePathBack = imagePathBack;
this.category = category;
this.price = price;
}

Continue reading...