如何在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();