Utilizing ng-repeat to iterate over a nested array

Question

Utilizing ng-repeat to iterate over a nested array

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

]

javascript arrays json angularjs angularjs-ng-repeat

Answer 1

Answer №1

When you properly assign $scope.recipeIngredients (meaning that whichItem is correctly set and corresponds to an actual object in your JSON data), then $scope.recipeIngredients will already be pointing to an array of ingredients (for example, ["duck", "confit", "otherstuff"]). To iterate over these items, all you need to do is:

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

If you want to iterate over the entire data array of recipes, you will need a nested ng-repeat as shown below:

<div ng-repeat="recipe in recipes">
  <div>{{recipe.dish}}</div>
  <ul>
    <li ng-repeat="item in recipe.ingredients">{{item}}</li>
  </ul>
</div>

Answer 2

When you properly assign $scope.recipeIngredients (meaning that whichItem is correctly set and corresponds to an actual object in your JSON data), then $scope.recipeIngredients will already be pointing to an array of ingredients (for example, ["duck", "confit", "otherstuff"]). To iterate over these items, all you need to do is:

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

If you want to iterate over the entire data array of recipes, you will need a nested ng-repeat as shown below:

<div ng-repeat="recipe in recipes">
  <div>{{recipe.dish}}</div>
  <ul>
    <li ng-repeat="item in recipe.ingredients">{{item}}</li>
  </ul>
</div>

Utilizing ng-repeat to iterate over a nested array

Answer №1

Similar questions

Could there be a scenario where the body onload function runs but there is still some unexec

Producing asynchronous JavaScript events using a browser extension (NPAPI)

What is the best way to transfer the search query to a table filter when working with multiple JavaScript files?

Generate random images and text using a script that pulls content from an array

Leveraging Javascript to generate universal HTML content for various Javascript files

Adjust the button's hue upon clicking it

What is the best location to place AngularJS scope $watch functions?

The error message "Cannot call expressjs listen on socket.ip" indicates that there

What is the best way to retrieve the data from this date object?

Tips for managing @ManyToMany relationships in TypeORM

Mastering card sliding and spacing in React NativeLearn how to effortlessly slide cards horizontally in your React

Having trouble deploying a Heroku app using Hyper? Here's a step-by-step guide to

Combining Angular Scripts with Model-View-Controller

What is the method to create a resizable table column border rather than resizing the bottom corner border?

Using the React UseEffect Hook allows for value updates to occur within the hook itself, but not within the main

What is the best way to initiate an onload event from a script embedded within a jquery plugin?

The importance of dependencies in functions and testing with Jasmine

Discover the way to utilize the java enum toString() function in jQuery

Button ng-click with identical function parameters

What was the reason for the removal of the `encoding` keyword argument from json.loads() function in Python 3.9?