Looking at this HTML file, I am trying to display a 2D array from the json-$scope.listOfIngredient
<div class="ingredientMapping" ng-repeat="IngredientMapping in listOfIngredient track by $index">
<ul>
<!-- BEGIN: Inner ngRepeat. -->
<li ng-repeat="x in IngredientMapping.Ingredient">
{{x.name}}
</li>
<!-- END: Inner ngRepeat. -->
</ul>
</div>
Now, let's take a look at my Controller.js
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 temp;
for(var i=0; i<response.data.recipes.length;i++){
$http({
method: 'GET',
url: url2+ response.data.recipes[i].Recipe.id +".json"
}).then(function (response2) {
$scope.listOfIngredient = new Array(100);
for (var j = 0 ;j<100;j++)
{
$scope.listOfIngredient[i] = new Array(100);
}
for (var j = 0 ;j<response2.data.recipe.IngredientMapping.length;j++)
{
$scope.listOfIngredient[i][j] = response2.data.recipe.IngredientMapping[i];
}
console.log($scope.listOfIngredient);
});
}
})
This is the link to my Json file
In implementing this, an error occurred and it seems to stem from $scope.listOfIngredient[i][j] = response2.data.recipe.IngredientMapping
I'm uncertain if I am doing it right when trying to get a 2D array in this manner https://i.sstatic.net/9ZQZi.png