CODEWITHSUNDEEP
angularjsnode.js
Dustin Baier
Dustin Baier

Reputation: 21

Nested angular.forEach issue

I am trying to loop through an array inside an array normally an easy task. However I have never done this in angular before and it is proving to be annoying. I am sure I am missing some understanding of the way I should do things in order to accomplish that. The cloneMealPlan item in the scope is the one I am trying loop through specifically there is an array of meals and inside each meal an array of recipes.

When I log to the console right in the beginning of the function it all looks fine. However, inside the first forEach I can't access the recipes array that was in the meal. If you log the meal as a whole you can see it in the console but not when you try and reference from inside meal.

I am also open to a better way of doing this in general essentially I need to clone a MealPlan which has quite a few layers of arrays in it (doesn't stop at recipes) I have consider moving all of this to the backend and just doing a select and insert on the node side but wasn't sure the best practice.

For now I am sending the whole MealPlan as an object and then doing an async eachSeries on the backend sense each piece needs ids from the other.

So my specific question is why can't I access the recipes array from inside meal forEach?

var cloneIngredientsLists = function() {

    console.log($scope.cloneMealPlan);
    console.log($scope.cloneMealPlan.meals);
    console.log($scope.cloneMealPlan.meals[0].recipes);

    angular.forEach($scope.cloneMealPlan.meals, function(meal) {

      console.log(meal);
      console.log(meal.recipes);
      console.log(meal.recipes.length);

      angular.forEach(meal.recipes, function(recipe) {

        console.log(recipe);


          return IngredientsListMapping
          .query({id: recipe.id})
          .$promise
          .then(function(ingredientslists) {
            $scope.ingredientslists = ingredientslists;
            if (!recipe.ingredientslists) {
              recipe.ingredientslists = [];
            }

            for (var k = 0; k < ingredientslists.length; k++) {

              recipe.ingredientslists[k] = ingredientslists[k];
              recipe.ingredientslists[k].list_name = ingredientslists[k].list_name + '- Clone';


              if (!recipe.ingredientslists[k].ingredients) {
                recipe.ingredientslists[k].ingredients = [];
              }

            }


          });
        });
      });
  };

Upvotes: 0

Views: 2777

Answers (2)

pgksunilkumar
pgksunilkumar

Reputation: 396

angular.forEach($scope.cloneMealPlan, function(item) {
    angular.forEach(item.meals, function(second) {
        angular.forEach(second, function(third) {
            console.log(third.recipes);
        });
    });
});

Upvotes: 0

Cristi Berceanu
Cristi Berceanu

Reputation: 1693

I think your problem is you're firing all the requests in the for loop. It's not a good practice to fire requests in the for loop since the promises don't need to finish in the same order you made them. I would either move that whole logic to the backend and try making as few requests as possible and be very careful with the promises they return and when they get resolved, or you can try flattening the promise chain. Here is a very good article on how the promise system works in angular.

Edit: Can you try and remove the request part and just console.log(recipe)? Also, I don't think you need to return the promise in the forEach loop.

Upvotes: 1

Related Questions