wie man 2d Array in html Seite mit AngularJS

Question

zeigt

Ich möchte alle Zutaten von jedem Rezept zeigen, ich habe ein 2D-Array erstellt und drücken Sie jeden Namen der Zutat jedes Rezept, Ausgabe aller Zutaten in der Konsole ist kein Problem (console.log ($ scope.listOfIngredient [i] [j] .Ingredient.name) funktioniert, aber console.log ($ scope.listOfIngredient) funktioniert nicht, was mich verwirrt, und eine andere Sache ist, dass listOfIngredient in html-Datei enthält eine zufällige Zutat des Rezepts, wie Sie sehen Bild unten Code, kann Browser immer nur ein Rezept Ingredient, aber console.log ($ scope.listOfIngredient) zeigt nichts in dieser ListeOfIngredient.

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

Die console.log($scope.listOfIngredient); nicht funktioniert, weil es außerhalb Ihrer inneren $http Anfrage ist.

Anstatt eines 2D-Arrays, würde ich raten, Ihre Datenstruktur zu ändern, wie:

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

Um alle Rezepte Liste und jeder der Zutaten, die Sie eine verschachtelte ng-repeat verwenden würde:

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

Ein weiterer zu beachten ist, dass, weil Sie einen asynchronen $http Aufruf innerhalb Ihrer for(var i=0; i<recipeLength;i++){...} Schleife verwenden, dass innerhalb der Antwortfunktion der Wert i möglicherweise nicht das ist, was Sie erwarten. Um dies zu vermeiden, würde der Aufruf $http von einer Funktion, die den Indexwert als Parameter akzeptiert, den Index für diesen Aufruf lokal halten.

Wenn Sie die Struktur verwende ich sagte, würde Loops etwas wie folgt aussehen:

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