Using ng-repeat on an array within an array

Question

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

]

is itemId a 0-indexed index of the item you want to show? or is it something else. — user400654
– user400654, Commented Apr 10, 2015 at 20:14
I'm a newbie programmer, so please excuse any obvious mistakes. — breken
– breken, Commented Apr 10, 2015 at 20:15
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. — user400654
– user400654, Commented Apr 10, 2015 at 20:15
@KevinB, the question is about "trying to iterate ... using ng-repeat" — New Dev
– New Dev, Commented Apr 10, 2015 at 20:16

New Dev · Accepted Answer · 2015-04-10 20:28:39Z

3

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>

edited Apr 10, 2015 at 20:28

answered Apr 10, 2015 at 20:19

New Dev

49.8k12 gold badges99 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

breken Over a year ago

whichItem maps to whatever recipe (JSON object) I selected from the previous page, so I'm not sure how to properly assign $scope.recipeIngredients

New Dev Over a year ago

You arleady do that with $scope.recipeIngredients = recipe[whichItem].ingredients; (actually, it should be $scope.recipe[whichItem].ingre... or data[whichRecipe].ingre...)

breken Over a year ago

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.

New Dev Over a year ago

@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

breken Over a year ago

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>

|

Collectives™ on Stack Overflow

Using ng-repeat on an array within an array

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related