not getting value from getRecipe()

Question

I am trying to emit a subject while fetching data from another service ,but the subject is not passing the value from setRecipe() to getRecipe() and in ngOninit of the component there is not value getting from the service.

 @Injectable()
export class RecipeService{
  recipesChanged = new Subject<Recipe[]>();
  private recipes:Recipe[]=[];
constructor(private slService:ShoppingListService){}
   setRecipes(recipe: Recipe[]){
      this.recipesChanged.next(this.recipes.slice());
     console.log("value from setRecipe()", this.recipes);
      }

   getRecipes(){
     console.log("value from getRecipes()", this.recipes.slice());
      return this.recipes.slice();
    
    }

in the RecipeListComponent

   export class RecipeListComponent implements OnInit, OnDestroy {

   recipes:Recipe[];
   subscription: Subscription;
   constructor(private recipeService : RecipeService  , 
  private router : Router ,private route : ActivatedRoute 
   ) {}
    ngOnInit() {
    this.recipeService.recipesChanged
  .subscribe(
    (recipes: Recipe[]) => {
     console.log("recipes from recipe list comp",recipes);
      this.recipes = recipes;
     
    }
  );
 console.log("my recipes",this.recipes);
 this.recipes= this.recipeService.getRecipes();   

  }

and the data is fetched from firebase in datastorage service and is setting to the setRecipe() of recipe service. I am getting value of recipes from Firebase to datastorage service and in the setRecipe()log I am getting value but its not setting the value of my recipes[] and so it is not passing value to the component.

score 0 · Answer 1 · answered Aug 06 '20 at 08:31

In your setRecipes value emitted by your subject is the empty array recipes variable and your recipes array is never modified.

So getRecipes will always return an empty array.

It's also a bit strange if you emit the recipes list with the subject, why would you need a getRecipes method ? You should simply emit the recipes list passed to the setRecipes function

  setRecipes(recipe: Recipe[]){
      this.recipesChanged.next(recipe.slice());
  }

and in your component

ngOnInit() {
    this.recipeService.recipesChanged
    .subscribe(
        (recipes: Recipe[]) => {
            this.recipes = recipes;     
        }
    );
}

If you wish to save the recipes list in your service then you could do something like

@Injectable()
export class RecipeService{
recipesChanged = new BehaviourSubject(false);
private recipes:Recipe[]=[];

constructor(private slService:ShoppingListService){}

setRecipes(recipe: Recipe[]){
    this.recipes = recipe;
    this.recipesChanged.next(true);
}

getRecipes(){
    return this.recipes.slice();        
}

and in your component

ngOnInit() {
    this.recipeService.recipesChanged
    .subscribe(
        hasChanged => {
            if (hasChanged)
            this.recipes = this.recipeService.getRecipes();     
        }
    );
}

setrecipe() is called from another service where the value from DB is getting passed.but the subject is not passing that value from setRecipe().fetchRecipes(){ return this.http.get("//API URL") .subscribe (recipes => { this.rService.setRecipe(recipes) // the value with Recipes array is passed }); } — Asha, Aug 06 '20 at 10:50
I am getting the value inside the setRecipe() when I log the value but after storing it in recipes[] it is not getting in the getRecipe(). — Asha, Aug 06 '20 at 11:15
In your code recipes array is initialized empty and you never push any data in it. So getRecipe cannot return anything other than this empty array. — François Minh, Aug 06 '20 at 12:37

not getting value from getRecipe()

1 Answers1