When it comes to saving and retrieving data from a Firebase database, I seem to be encountering an issue where the type of data retrieved does not match what I am expecting. Let me break down what I am doing and the problem I am facing:
Saving data
To save an array of Recipe to a Firebase database, I utilize the following code snippet:
save() {
this.http.put(
this.recipeURL,
this.recipesService.getRecipes()
).subscribe(
(response) => {
console.log(response);
}
);
}
The process of retrieving the Array of Recipe objects through the RecipeService is rather straightforward:
getRecipes() {
return this.recipes.slice();
}
The structure of the Recipe model is quite basic:
export class Recipe {
public id: number;
public name: string;
public description: string;
public imagePath: string;
public ingredients: Ingredient[];
constructor(id: number, name: string, desc: string, imagePath: string, ingredients: Ingredient[]) {
this.id = id;
this.name = name;
this.description = desc;
this.imagePath = imagePath;
this.ingredients = ingredients;
}
}
Retrieving data
To retrieve the data, I implement the following code:
read() {
this.http.get<Recipe[]>(
this.recipeURL
).subscribe((recipes) => {
console.log(recipes);
console.log(this.recipesService.getRecipes());
})
}
The outcome/issue
Upon examining the responses from the get method and comparing them with the original list of Recipe objects, it appears that instead of retrieving Recipe objects, I am obtaining an Array of Json objects. The disparity between the two can be observed in the console output below:
https://i.stack.imgur.com/WT5Pi.png
It is evident that one is an Array of {...}, while the other is an Array of Recipe.
I would appreciate any assistance in understanding/solving this issue. The concern arises when, post updating my application with the data retrieved from the Firebase database, the new information is not displayed on the page as expected. Instead, the old data persists.