Trying to access nested array using ng-repeat

Question

Currently working on a practice project where I am utilising the angular knowledge I have gathered and continue gathering through the online courses I am taking.

I am having a bit of trouble accessing a nested array. I saw an online tutorial and I have followed the basis of what was shown but I am obviously not doing something right. The code is shown below.

<div class="container">

    <div class="classic-movie" ng-repeat="films in movies">

        <div class="movie-summary">

            <div class="movie-image">

                <img ng-src="{{films.cover}}" class="movie-thumbnail">

            </div>

            <div class="movie-name-plot">

                <h1>{{films.title}}</h1>

                <p>{{films.plot}}</p> 

                <p><span class="white-mini-header">Starring:</span>{{films.starring}}</p>

                <p><span class="white-mini-header">Runtime:</span>{{films.runtime}}</p>

            </div>

        </div>

        <div class="movie-showtimes">

            <ul class="movie-timing mon-timings" ng-repeat="timing movies.monTimings">

                <li>{{timing.time1}}</li>
                <li>{{timing.time2}}</li>
                <li>{{timing.time3}}</li>
                <li>{{timing.time4}</li>
                <li>{{timing.time5}}</li>
                <li>{{timing.time6}}</li>

            </ul>

        </div>

    </div>

</div>

And below is a template of the first object in the array.

var myapp = angular.module("myapp", []);

myapp.controller("maincontroller", ["$scope", function($scope){

    $scope.movies = [

    {
        cover: "images/movie-images/ferres.jpg",
        title: "Ferris Bueller's Day Off (1987)",
        plot: "High school student Ferris Bueller wants a day off from school and he's developed an incredibly sophisticated plan to pull it off. He talks his friend Cameron into taking his father's prized Ferrari and with his girlfriend Sloane head into Chicago for the day. While they are taking in what the city has to offer school principal Ed Rooney is convinced that Ferris is, not for the first time, playing hooky for the day and is hell bent to catch him out. Ferris has anticipated that, much to Rooney's chagrin.",
        starring: "Matthew Broderick, Alan Ruck, Mia Sara",
        runtime: "103min",
        monTimings: [
        {
            time1: "10:45",
            time2: "13:10",
            time3: "15:45",
            time4: "18:25",
            time5: "20:30" ,
            time6: "21:50",

        }
        ]

    },

When I go to the view, the list in which the timings are supposed to be displayed are not there at all.

Vignesh · Accepted Answer · 2018-03-18 17:36:51Z

2

Since it is a nested array, we need two loops for iteration. You can achieve it by adding the second loop for monTimings in first div as below

          <div class="classic-movie" ng-repeat="films in movies">
             <!-- use existing block for films -->
                 <ul class="movie-timing mon-timings" ng-repeat="timing in films.monTimings">
                   <!--use timing to iterate monTimings  -->
                 </ul>
            </div>

answered Mar 18, 2018 at 17:36

Vignesh

813 bronze badges

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

Comments

KfirM · Accepted Answer · 2018-03-18 12:17:01Z

1

You are missing in at your second ng-repeat
You should ng-repeat on films.monTimings since movies.monTimings doesn't exist since movies is an array which doesn't have the monTimings property. Only the elements it contains has that.

So change this:

ng-repeat="timing movies.monTimings"

To this:

ng-repeat="timing in films.monTimings"

answered Mar 18, 2018 at 12:17

KfirM

1111 silver badge8 bronze badges

Comments

Kavindra · Accepted Answer · 2018-03-18 12:18:12Z

1

You have a mistake in this line <ul class="movie-timing mon-timings" ng-repeat="timing movies.monTimings">.

It should be:

 <ul class="movie-timing mon-timings" ng-repeat="timing in films.monTimings">

You have forgotten in in ng-repeat.

answered Mar 18, 2018 at 12:18

Kavindra

1,7072 gold badges15 silver badges19 bronze badges

Collectives™ on Stack Overflow

Trying to access nested array using ng-repeat

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related