current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote -1 down vote favorite

I want to itterate through elements which are in array which is in object using ng-repeat.

This is what i have done so far:

Controller:

app.controller('videoDisplayCtrl', function($scope){

var videos = 
    [
        {
        title: 'Course introduction',
        pictureUrl: 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS_kNT5UnXz5dQ6tId9YO0wIJ7YSgRvD1SUxyfdXcXZVdOH7z4b',
        length: '3:32',
        category: 'IT',
        subscribers: 3,
        date: new Date(2014, 12, 15),
        haveSubtitles: false,
        comments: [
            {
            username: 'Pesho Peshev',
            content: 'Congratulations Nakov',
            date: new Date(2014, 12, 15, 12, 30, 0),
            likes: 3,
            websiteUrl: 'http://pesho.com/'
            },
            {
            username: 'Pesho Peshev1',
            content: 'Congratulations Nakov',
            date: new Date(2014, 12, 15, 12, 30, 0),
            likes: 3,
            websiteUrl: 'http://pesho.com/'
            },
            {
            username: 'Pesho Peshev2',
            content: 'Congratulations Nakov',
            date: new Date(2014, 12, 15, 12, 30, 0),
            likes: 3,
            websiteUrl: 'http://pesho.com/'
            }
            ]
        }
    ];
    $scope.videos = videos;
    console.log(videos);});

And in the view i do this:

<div ng-controller="videoDisplayCtrl">
    <h2 ng-repeat="x in videos">
        {{x.comments[0].username}}
    </h2>
</div>

This will display only the first "username" of the first object of the "comments" array. I am missing something but i can't see what.

share|improve this question
    
you want to display all username? just remove the index. – Sajeetharan May 10 '15 at 16:58
    
Wont work i have done this and receive error mesage: Error: [$parse:syntax] Syntax Error: Token ']' not a primary expression at column 12 of the expression [x.comments[].username] starting at [].username]. – Иван Иванов May 10 '15 at 16:59
    
try the solution I gave and let me know of any issues – Pratik May 10 '15 at 17:06
    
Can you please mark an answer as correct so that it helps others – Pratik May 10 '15 at 17:08
up vote 1 down vote accepted 
<div ng-controller="videoDisplayCtrl">
    <div ng-repeat="x in videos">
         <h2 ng-repeat="comment in x.comments">
        {{comment.username}}
         </h2>
    </div>
</div>

You would need two loops, on to loop through your videos and the second to loop through your comments in each video which is another array.

share|improve this answer
    
Thx alot some minor change tho only on inner loop is h2 on outer i will change it to div and it works!! – Иван Иванов May 10 '15 at 17:06
    
yeah. sorry, kept the outer loop as h2 too. – Pratik May 10 '15 at 17:07
    
not true, I posted my one before :) – Artem Petrosian May 10 '15 at 17:10
    
:D its fine. @ArtemPetrosian I posted 6 minutes before you :P – Pratik May 10 '15 at 17:12
    
you edited after me to fix layout problems, doesn't matter anyway :) – Artem Petrosian May 10 '15 at 17:14
up vote 0 down vote

that is because you're displaying only the [0]th element. remove it!

<h2 ng-repeat="x in videos">
    <div ng-repeat="y in x.comments"> 
         {{y.username}}
     </div>    
</h2>

UPDATED:

working FIDDLE

share|improve this answer
    
No this is not the problem it still wont display usernames :( – Иван Иванов May 10 '15 at 17:02
up vote 0 down vote

There are two ways to do it:

1 - Delete the "[0]", that will let the ng-repeat get the data from the iteration of the array.

<div ng-controller="videoDisplayCtrl">
   <h2 ng-repeat="x in videos">
       {{x.comments.username}}
   </h2>
</div>

2 - Assign to "x" the array in the ng-repeat declaration

<div ng-controller="videoDisplayCtrl">
    <h2 ng-repeat="x in videos.comments">
        {{x.username}}
    </h2>
</div>
share|improve this answer
up vote 0 down vote

Your comments are also inside Array, so you need one more ng-repeat to display it:

<div ng-controller="videoDisplayCtrl">
    <div ng-repeat="video in videos">
        <h2 ng-repeat="comment in video.comments">{{comment.username}}</h2>
    </div>
</div>

Btw, it is a good practice to pick a readable names for your variables/properties, instead of something like x.

share|improve this answer

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.