how to show 2d Array in html page with AngularJS

Question

I wanna show all Ingredient of each recipes, I created a 2d array and push each name of Ingredient of each recipe, outputting all ingredient in console is no problem( console.log($scope.listOfIngredient[i][j].Ingredient.name) is working) ,but console.log($scope.listOfIngredient) doesn't work, which make me confused, and another thing is that listOfIngredient in html file just contains one random ingredient of recipe, as you see picture below code, browser always can only show one recipe Ingredient, but console.log($scope.listOfIngredient) shows nothing in this listOfIngredient.

var myApp = angular.module('myApp', []);

myApp.controller('mainController', function($scope, $http) {

  $scope.listOfRecipe = null;
  var url = "http://164.132.196.117/chop_dev/recipe/recipes.json";
  var url2 = "http://164.132.196.117/chop_dev/recipe/recipes/view/";
  $http({
    method: 'GET',
    url: url

  }).then(function(response) {

    $scope.listOfRecipe = response.data.recipes;
    var recipeLength = $scope.listOfRecipe.length;

    $scope.listOfIngredient = new Array(recipeLength);

    console.log(recipeLength);
    for (var i = 0; i < recipeLength; i++) {
      $http({
        method: 'GET',
        url: url2 + response.data.recipes[i].Recipe.id + ".json"
      }).then(function(response2) {


        var IngredientLength = response2.data.recipe.IngredientMapping.length;
        console.log(IngredientLength);

        for (var j = 0; j < IngredientLength; j++) {
          $scope.listOfIngredient[i] = new Array(IngredientLength);
        }

        for (var j = 0; j < IngredientLength; j++) {
          $scope.listOfIngredient[i][j] = response2.data.recipe.IngredientMapping[j];

          console.log($scope.listOfIngredient[i][j].Ingredient.name);
          /*  $scope.listOfIngredient[i].push(response2.data.recipe.IngredientMapping[j]); */
        }
      });
    }
    console.log($scope.listOfIngredient);
  })
});

<div ng-app="myApp" ng-controller="mainController" class="center">
  <div class="container-fluid">
    <div class="ingredientMapping2" ng-repeat="recipes in listOfIngredient track by $index ">
      <ul>{{recipes}}</ul>
      <ul>
        <li ng-repeat="x in recipes track by $index ">
          {{x.Ingredient.name}}
        </li>
      </ul>
    </div>
  </div>
</div>

where is the issue? use chrome AngularJs plugin batarang to look more into angular $scope instead of using console.log() — Braj
– Braj, Commented Aug 5, 2016 at 17:08

plong0 · Accepted Answer · 2016-08-05 19:35:28Z

The console.log($scope.listOfIngredient); does not work because it is outside of your inner $http request.

Rather than a 2D array, I would advise to modify your data structure like:

$scope.recipes = [
    { name: 'My Recipe',
        ingredients: [
            {name: 'Ingredient 1'},
            {name: 'Ingredient 2'}
        ]
    }
];

To list all recipes and each one's ingredients you would use a nested ng-repeat:

<ul class="recipes">
    <li class="recipe" ng-repeat="recipe in recipes">
        <span class="name">{{recipe.name}}</span>
        <ul class="ingredients">
            <li class="ingredient" ng-repeat="ingredient in recipe.ingredients">
                {{ingredient.name}}
            </li>
        </ul>
    </li>  
</ul>

Another thing to note is that because you are using an async $http call inside your for(var i=0; i<recipeLength;i++){...} loop, that inside the response function the value of i may not be what you expect. To avoid this, making the $http call from function that takes the index value as a parameter would keep the index local for that call.

If you use the structure I said, your loops would look something like:

function loadRecipe(Recipe){
    var RecipeEntry = {
        name: Recipe.name,
        ingredients: []
    };
    $scope.recipes.push(RecipeEntry};

    $http({
        method: 'GET',
        url: url2+ Recipe.id +".json"
    }).then(function (response2) {
        RecipeEntry.ingredients = response2.data.recipe.IngredientMapping;
    });
}

function loadRecipes(){
    $http({
        method: 'GET',
        url: url
    }).then(function (response) {
        var recipes = response.data.recipes;

        $scope.recipes = [];
        for(var i=0; i < recipes.length; i++){
            loadRecipe(recipes[i].Recipe);
        }
    });
}

loadRecipes();

Collectives™ on Stack Overflow

how to show 2d Array in html page with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related