如何在AngularJS的html頁面中顯示2d數組

Question

我想顯示所有食譜的成分，我創建了一個2d數組，並且推送每個食譜的成分的每個名稱，在控制檯中輸出所有成分是沒有問題的（console.log $ scope.listOfIngredient [i] [j] .Ingredient.name）工作），但console.log（$ scope.listOfIngredient）不起作用，這使我感到困惑，另一件事是HTML文件中的listOfIngredient只包含一個隨機的配方成分，正如你在圖片下面看到的代碼一樣，瀏覽器總是隻能顯示一個配方成分，但是console.log（$ scope.listOfIngredient）在這個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> 

Answer 1

的console.log($scope.listOfIngredient);不起作用，因爲它是你的內在要求$http之外。

，而不是一個二維數組，我會建議修改你的數據結構，如：

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

要列出你可以使用一個嵌套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> 

另一個需要注意的是，因爲您在for(var i=0; i<recipeLength;i++){...}循環內使用異步$http調用，所以在響應函數內部，值i可能不是您所期望的。爲避免這種情況，將函數$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();