Displaying data with ng-repeat from JSON array

Question

This is my JSON data:

$scope.track = [{
        title: 'Group Therapy 150 with Above & Beyond and Maor Levi',
        date: new Date(),
        link: "https://www.mixcloud.com/widget/iframe/?embed_type=widget_standard&amp;embed_uuid=a38e8d96-7372-430b-91b3-7549a408ac7c&amp;feed=https%3A%2F%2Fwww.mixcloud.com%2FPlayLifePodcast%2Fdj-nyk-play-life-podcast-003%2F&amp;hide_cover=1&amp;hide_tracklist=1&amp;replace=0",
        tracklist: ['Adam Rickfors - Twang Machine (Original Mix)', 'Cirez D - On Off (Tannergaard Remode)', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats'],
        guest: 'Guest Mix by Pep & Rash',
        guestlist: ['Tom Staar - Bora / S.H.M - Save The World', 'Dimitri Vegas, Like Mike, Ne-Yo - Higher Place (Tujamo Remix)', 'New_ID & Funk Machine - I Wanna Move', 'Knife Party - Lrad', 'Knife Party - Lrad', 'Knife Party - Lrad', 'Knife Party - Lrad', 'Knife Party - Lrad', 'Knife Party - Lrad']
    }]

This is how I am accessing it:

<div id="podcast-wrapper">
    <h1>{{track.title}}</h1>
    <h4>{{track.date | date}}</h4>
    <iframe width="100%" height="180" ng-src="{{track.link | trustAsResourceUrl}}" frameborder="0"></iframe>
    <div class="row">
        <div class="col-sm-6">
            <h3>TrackList</h3>
            <ul>
                <li ng-repeat="song in track.tracklist">{{song}}</li>
            </ul>
        </div>
        <div class="col-sm-6">
            <h3>{{track.guest}}</h3>
        </div>
    </div>
</div>

The title, date, guest name is displayed as expect but i cant not display the track list inside of the li elements using ng-repeat.

Any help is appreciated, thank you.

so $scope.track is array or object? do you see any errors in console? — Grundy
– Grundy, Commented Dec 8, 2015 at 19:20
It is an array, for the sake of simplicity i only showed one object inside of the array. — ANshul Sharma
– ANshul Sharma, Commented Dec 8, 2015 at 19:21
in this case, i don't know how it work with title, date and etc, because you not get concrete element, and try see property from array — Grundy
– Grundy, Commented Dec 8, 2015 at 19:23

Aᴍɪʀ · Accepted Answer · 2015-12-08 19:26:02Z

1

You can not have duplicate entries in arrays if you want to loop over them in ng-repeat. https://docs.angularjs.org/error/ngRepeat/dupes

answered Dec 8, 2015 at 19:26

Aᴍɪʀ

7,8133 gold badges40 silver badges54 bronze badges

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

Collectives™ on Stack Overflow

Displaying data with ng-repeat from JSON array

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related