Nested ng-repeat with AngularJS

Question

I cannot seem to get out the values I need from a nested ng-repeat in AngularJS.

I have the following data sent from the server:

[{"Your Turn":[{"gameToken":"sSFK0OHhYa8M4F6Z5Z1uNFnawQNVkZXj1GZyTEeSv2h8gntr9UrEU5FQsR9r8YWMWvjA6tePINbOm2Fc5u8U659QaRK0dju0","friendId":"522eec17e4b088a0a939cfdb","friendName":"Michelle","status":"You are waiting for Michelle Miguelamimio Agoramarketomercado to accept your challenge"}]},{"Their Turn":[{"gameToken":"sSFK0OHhYa8M4F6Z5Z1uNFnawQNVkZXj1GZyTEeSv2h8gntr9UrEU5FQsR9r8YWMWvjA6tePINbOm2Fc5u8U659QaRK0dju0","friendId":"522eec17e4b088a0a939cfdb","friendName":"Michelle Miguelamimio Agoramarketomercado","status":"You are waiting for Michelle to accept your challenge"}]}]

And the following template for the HTML:

<div ng-repeat="turn in data">
    <p>{{turn}}</p>
    <ul class="list-bare list-inline tab-group">
        <li ng-repeat="(key, value) in turn" class="tab tab-active txt-upper {{key | lowercase}}">{{key}}</li>
    </ul>
    <ul class="list-bare list-users clearfix">
        <li class="clearfix" ng-repeat="game in turn">
            <div class="avatar-container">
                <img class="avatar" ng-src="{{baseUrl}}/shobo/user/avatar/{{game.friendId}}" alt="{{game.friendName}}" />
            </div>
            <div class="list-users-info">
                <h3 class="text-cap">{{game.friendName}}</h3>
                <p>{{game.status}}</p>
            </div>
            <div class="list-users-status txt-center" ng-click="acceptChallenge(game.gameToken,game.friendId)">
                <div><i class="icon-chevron-right"></i></div>
            </div>
        </li>
    </ul>
</div>

I am not seeing any of the 'game' values being output from the second ng-repeat and am not sure what i am doing wrong?

AlwaysALearner · Accepted Answer · 2013-09-24 06:38:58Z

1

<li class="clearfix" ng-repeat="game in turn">

should be

<li class="clearfix" ng-repeat="game in value">

answered Sep 24, 2013 at 6:38

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

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

2 Comments

RyanP13 Over a year ago

Hi. I only loop over the object to get the key out to display in the UI. Should I use the same object loop to output the nested array?

AlwaysALearner Over a year ago

I dont clearly get what you are trying to do but the above is how you should loop over the data.

Nitu Bansal · Accepted Answer · 2013-09-30 09:19:00Z

need to make some changes in data and html to make require html

        $scope.data=[{
        "Title":"Your Turn",
"Turn": [{
    "gameToken":"sSFK0OHhYa8M4F6Z5Z1uNFnawQNVkZXj1GZyTEeSv2h8gntr9UrEU5FQsR9r8YWMWvjA6tePINbOm2Fc5u8U659QaRK0dju0",
    "friendId": "522eec17e4b088a0a939cfdb",
    "friendName": "Michelle",
    "status": "You are waiting for Michelle Miguelamimio Agoramarketomercado to accept your challenge"
}]
  }, {
 "Title":"Their Turn",
"Turn": [{
    "gameToken": "sSFK0OHhYa8M4F6Z5Z1uNFnawQNVkZXj1GZyTEeSv2h8gntr9UrEU5FQsR9r8YWMWvjA6tePINbOm2Fc5u8U659QaRK0dju0",
    "friendId": "522eec17e4b088a0a939cfdb",
    "friendName": "Michelle Miguelamimio Agoramarketomercado",
    "status": "You are waiting for Michelle to accept your challenge"
}]
            }];

HTML

    <div ng-repeat="turn in data">
     <ul class="list-bare list-users clearfix">
    <h1>{{turn.Title}}</h1>
    <li class="clearfix" ng-repeat="game in turn.Turn">
        <div class="avatar-container">
            <img class="avatar" ng-src="{{baseUrl}}/shobo/user/avatar/{{game.friendId}}"      alt="{{game.friendName}}" />
        </div>
        <div class="list-users-info">
            <h3 class="text-cap">{{game.friendName}}</h3>
            <p>{{game.status}}</p>
        </div>
        <div class="list-users-status txt-center" ng-click="acceptChallenge(game.gameToken,game.friendId)">
            <div><i class="icon-chevron-right"></i></div>
        </div>
    </li>
   </ul>


       </div>

please refer below fiddle

http://jsfiddle.net/U3pVM/1476/

Collectives™ on Stack Overflow

Nested ng-repeat with AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related