AngularJS's ng-repeat in line, coma-separated, two attributes in the same line

user_11084701 0
Viewed 32

This is my JSON.

[
 {
   "site":"New York",
   "players":[{"name":"Mike"},{"name":"Tom"}],
   "journalists":[{"name":"Alice"},{"name":"Bob"}],
   "managers":[]
 },
 {
   "site":"Barcelona",
   "players":[{"name":"James"},{"name":"Paul"}],
   "journalists":[{"name":"John"}],
   "managers":[{"name":"Kenny"},{"name":"Tim"}]
 }
]

I want to display it like this:

New York:
 - journlists: Alice, Bob
 - players: Mike, Tom

Barcelona:
 - journlists: John
 - players: James, Paul
 - managers: Kenny, Tim

Let's say I can get the json data from scope $scope.myJson. I can't figure out how to use ng-repeat and ng-show (do not show empty arrays) together to achieve this.

angularjs json javascript
1 Answers

You need to have multiple ng-repeats, because you have multiple arrays. To hide empty rows use ng-if with .length

<div ng-repeat="item in myJson">
<h1>{{item.site}}:</h1><br />
<ul>
 <li ng-if="item.journalists.length > 0">- journalists: <span ng-repeat="journalist in item.journalists">{{journalist.name}}<span ng-if="!$last">, </span></span></li>
 <li ng-if="item.players.length > 0">- players: <span ng-repeat="player in item.players">{{player.name}}<span ng-if="!$last">, </span></span></li>
 <li ng-if="item.managers.length > 0">- managers: <span ng-repeat="manager in item.managers">{{manager.name}}<span ng-if="!$last">, </span></span></li>
</ul>
</div>
user_66496180
Related