CODEWITHSUNDEEP
angularjs
anon
anon

Reputation: 634

Trouble getting objects with ng-repeat

I am having a tough time with ng-repeat using Angular.

My JSON data looks like this

{
    "shows": {
        "stations": {
            "balaton": [{
                "name": "Minimal",
                "artist": "Sven Tasnadi",
                "duration" : "1H"
            }, {
                "name": "Forest of Love",
                "artist": "Bas Ibelini",
                "duration" : "2H"
            }, {
                "name": "Sound of Underground",
                "artist": "Potential Badboy",
                "duration" : "2H30"
            }],
            "djradio": [{
                "name": "Strickly Electronica",
                "artist": "Culptrate",
                "duration" : "1H"
            }, {
                "name": "Sound of Underground",
                "artist": "Potential Badboy",
                "duration" : "2H"
            }, {
                "name": "Sound Time",
                "artist": "Leona Graham",
                "duration" : "2H30"
            }]
        }
    }
}

In my controller, I set the object to a scope.

$http.get('json/show-schedule.json').success(function(res){
     $scope.schedule = res.shows.stations;
});

In my HTML, 

<div class="schedule-station" ng-repeat="item in schedule">
     <div class="schedule-station-logo" style="background-image:url('img/stations/{{balaton}}.png')"></div>
     <ul>  
         <li class="schedule-duration-{{item.duration}}">
            <span class="schedule-time">11PM</span>
            <span>{{item.name}}</span>
            <i><span>{{item.artist}}</span></i>
         </li>                         
     </ul>
</div>

Basically, I have a DIV that needs to be created based on how many stations there are in the JSON. Then, I need to get the station name, which is 'Balaton', and 'DJRADIO', this should be placed in my background-image such as balaton.png.

Then the List Item should be repeated based on how many tracks there in that particular station.

I am having a tough time figuring out how to do this, and my attempts are obviously way off.

Upvotes: 0

Views: 114

Answers (3)

Bartosz Gościński
Bartosz Gościński

Reputation: 1580

See ngRepeat documentation

It is possible to get ngRepeat to iterate over the properties of an object using the following syntax: <div ng-repeat="(key, value) in myObj"> ... </div>

So to you should be able to iterate your collection like this:

<div class="schedule-station" ng-repeat="(stationName, songs) in schedule">
    <div class="schedule-station-logo" style="background-image:url('img/stations/{{stationName}}.ng')"></div>
    <ul>
        <li ng-repeat="item in songs" class="schedule-duration-{{item.duration}}">
           <span class="schedule-time">11PM</span>
           <span>{{item.name}}</span>
           <i><span>{{item.artist}}</span></i>
        </li>
    </ul>
</div>

Upvotes: 1

manzapanza
manzapanza

Reputation: 6225

Try something like this:

<div class="schedule-station" ng-repeat="(station, tracks) in schedule">
     <h2>{{station}}</h2>
     <div class="schedule-station-logo" style="background-image:url('img/stations/{{station}}.png')"></div>
     <ul>  
         <li ng-repeat="track in tracks" class="schedule-duration-{{item.duration}}">
            <span class="schedule-time">11PM</span>
            <span>{{track.name}}</span>
            <i><span>{{track.artist}}</span></i>
            <b>{{track.duration}}</b>
         </li>                         
     </ul>    
</div>

Check the demo fiddle

Upvotes: 1

smb
smb

Reputation: 589

So there are a few things to consider here:

1) You have an object containing the stations, where it's a key, val set of items, where the values of the station property is an array of the songs. If the stations were an array, then you could do something like stations.length, but because it's a set of object properties, we need to count them manually, hence the angular.forEach.

$scope.schedule = data.shows.stations;

$scope.stationCount = 0;

angular.forEach($scope.schedule, function(station){
  $scope.stationCount++;  
});

2) To place each of the songs, we have to nest another ng-repeat so that we can iterate over each of the songs in the array.

3) The ng-repeat on the outside has to be setup for an object, and not an array, as you have in your original html.

I made a plnkr showing how to do everything for you: http://plnkr.co/edit/ca8WxSEvn00rYVfwN82r?p=preview

Upvotes: 1

Related Questions