I need help figuring out how to properly loop through a JSON array and its ingredients/directions array using ng-repeat. The current method I have attempted is not working as expected. Any suggestions or advice would be greatly appreciated! Thank you.
Controller:
recipeControllers.controller('DetailsController', ['$scope', '$http','$routeParams',
function($scope, $http, $routeParams) {
$http.get('app/data.json').success(function(data) {
$scope.recipe = data;
$scope.whichItem = $routeParams.itemId;
$scope.recipeIngredients = recipe[whichItem].ingredients;
}]);
HTML:
<div class="recipe">
<div class="ingredients">
<ul>
<li ng-repeat="item in recipeIngredients">{{recipeIngredients[whichItem].ingredients}}</li>
</ul>
</div>
</div>
JSON Data:
[
{
"dish":"thai_chicken_satay",
"ingredients": ["chicken", "sauce", "stuff"],
"directions": ["step1", "step2", "step3"]
},
{
"dish":"duck_confit",
"ingredients": ["duck", "confit", "otherstuff"],
"directions": ["step1", "step2", "step3"]
}
]