AngularJSでhtmlページに2d配列を表示する方法

Question

私はすべてのレシピの成分を表示したい、2次元配列を作成し、各レシピの各成分の名前を押して、コンソールのすべての成分を出力するのに問題はありません（console.log $ scope.listOfIngredient [i] [j] .Ingredient.name）が動作していますが、console.log（$ scope.listOfIngredient）がうまくいかず、混乱します。もう一つは、htmlファイルのlistOfIngredientにレシピの1つのランダム成分、下の図のコードを参照してください。ブラウザーは常に1つのレシピのみを表示できます。ただし、console.log（$ scope.listOfIngredient）はこのlistOfIngredientに何も表示しません。それはあなたの内側の$http要求の外にあるので

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> 

Answer 1

console.log($scope.listOfIngredient);は動作しません。

よりもむしろ2D配列、私のようなあなたのデータ構造を変更するために助言する：あなたは、ネストされたng-repeatを使用するすべてのレシピや、各1の成分を表示するには

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

：

<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> 

別あなたがfor(var i=0; i<recipeLength;i++){...}ループ内で非同期$http呼び出しを使用しているため、応答関数内ではiの値が期待どおりにならないことがあります。これを回避するには、インデックス値をパラメータとする関数from $httpを呼び出すと、その呼び出しのインデックスがローカルに保持されます。問題はどこに

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();