current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm trying to iterate through the JSON array and through the ingredients/directions array using ng-repeat. What I have isn't working. Any advice? Thanks!

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"]
  }

]
share|improve this question
    
is itemId a 0-indexed index of the item you want to show? or is it something else. –  Kevin B yesterday
2  
Where is the actual ng-repeat? –  New Dev yesterday
    
I'm a newbie programmer, so please excuse any obvious mistakes. –  breken yesterday
    
don't necessarily need an ng-repeat for this, though it is weird that the question mentions trying to use it but doesn't show it. –  Kevin B yesterday
    
@KevinB, the question is about "trying to iterate ... using ng-repeat" –  New Dev yesterday

1 Answer 1

up vote 3 down vote accepted

If you assign $scope.recipeIngredients properly (i.e. whichItem is properly set and maps to an actual object in your JSON data), then $scope.recipeIngredients already points to an array of ingredients (e.g. ["duck", "confit", "otherstuff"]), so to iterate you simply need to do:

<li ng-repeat="item in recipeIngredients">{{item}}</li>

If you need to iterate over the entire data array of recipes, then a nested ng-repeat is needed:

<div ng-repeat="recipe in recipes">
  <div>{{recipe.dish}}</div>
  <ul>
    <li ng-repeat="item in recipe.ingredients">{{item}}</li>
  </ul>
</div>
share|improve this answer
    
whichItem maps to whatever recipe (JSON object) I selected from the previous page, so I'm not sure how to properly assign $scope.recipeIngredients –  breken yesterday
    
You arleady do that with $scope.recipeIngredients = recipe[whichItem].ingredients; (actually, it should be $scope.recipe[whichItem].ingre... or data[whichRecipe].ingre...) –  New Dev yesterday
    
For instance, if I just use <li>{{recipe[whichItem].ingredients}}</li>, then I'll get back the entire string on one line. I'd like each ingredient on its own line. Thanks so much for your help thus far. –  breken yesterday
    
@breken, and I gave you the answer... your $scope.recipeIngredients already points (if you fixed the typo/bug I mentioned) to the ingredients array - so, ng-repeat over that –  New Dev yesterday
    
I really appreciate your help, but it still doesn't seem to be working. I may be misreading your directions, however. Controller: $scope.recipe = data; $scope.whichItem = $routeParams.itemId; $scope.data[whichItem].ingredients = recipeIngredients; and in my HTML: <div ng-repeat="recipe in recipes"> <div>{{recipe.dish}}</div> <ul> <li ng-repeat="item in recipe.ingredients">{{item}}</li> </ul> </div> –  breken yesterday

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.