Using ng-repeat on a JSON object doesn't work - why?

Question

I can't seem to iterate over a JSON object using ng-repeat. I did test it directly by index and it works, but just can't seem to loop and print. What am I doing wrong? JSFiddle link.

Here's my code:

<div ng-app="myApp">

<div ng-controller="Ctrl">

    <h3>Upcoming Events</h3>

    <ul ng-repeat="event in events">
        <li>{{ event.feed.entry.title.$t }}</li>    
    </ul>

    <!-- testing single entry here - it works! -->
    <small>{{ events.feed.entry[0].title.$t }}</small>

</div>

</div>

The script:

var app = angular.module('myApp', []);
var feedUrl = 'https://www.google.com/calendar/feeds/ogmda.com_89pas0l9jbhpf053atd83hdj30%40group.calendar.google.com/public/basic?alt=json';

app.controller('Ctrl', function($http, $scope) {
$http.get(feedUrl).success(function(data) {
    $scope.events = data;
    });
});

Your JsFiddle isn't going to work because it's blocked by CORS. — R. Salisbury
– R. Salisbury, Commented Oct 3, 2015 at 12:10

Dzinx · Accepted Answer · 2015-10-03 12:15:44Z

1

That's because you iterate over the whole data returned by the calendar query, and not over the entries themselves. Change your ul to:

<ul ng-repeat="entry in events.feed.entry">
    <li>{{ entry.title.$t }}</li>    
</ul>

answered Oct 3, 2015 at 12:15

Dzinx

58.2k10 gold badges63 silver badges78 bronze badges

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

Collectives™ on Stack Overflow

Using ng-repeat on a JSON object doesn't work - why?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related