I'm attempting to pull images from the Google Feed API to display in an RSS reader I'm building. I've successfully pulled the publishedDate and contentSnippet, but cannot seem to get the image src. Below is my current feeds partial and controller. Here I'm simply trying to test out an approach by pulling the first image, but it's not returning anything.
feeds.html:
<div ng-repeat="feed in feeds | orderBy:'title'">
<span ng-repeat="item in feed.entries">
<h2><a href="{{item.link}}" target="_blank">{{item.title}}</a></h2>
<img src="{{firstImg}}" alt="">
<p>{{item.publishedDate}}</p>
<p>{{item.contentSnippet}}</p>
</span>
</div>
FeedCtrl.js:
var feeds = [];
angular.module('feedModule', [])
.factory('FeedLoader', function ($resource) {
return $resource('http://ajax.googleapis.com/ajax/services/feed/load', {}, {
fetch: { method: 'JSONP', params: {v: '1.0', callback: 'JSON_CALLBACK'} }
});
})
.service('FeedList', function ($rootScope, FeedLoader) {
this.get = function() {
var feedSources = [
{title: 'Breaking Muscle', url: 'http://breakingmuscle.com/feed/nowod.xml'},
{title: 'Precision Nutrition', url: 'http://www.precisionnutrition.com/feed'},
{title: 'Girls Gone Strong', url: 'http://www.girlsgonestrong.com/feed/'},
];
if (feeds.length === 0) {
for (var i=0; i<feedSources.length; i++) {
FeedLoader.fetch({q: feedSources[i].url, num: 10}, {}, function (data) {
var feed = data.responseData.feed;
feeds.push(feed);
});
}
}
return feeds;
};
})
.controller('FeedController', function ($scope, FeedList) {
$scope.feeds = FeedList.get();
$scope.$on('FeedList', function (event, data) {
$scope.feeds = data;
var findFirstImage = data[0].entries[0].content;
var firstImage = $(findFirstImage).find('img').eq(0).attr('src');
$scope.firstImg = firstImage;
});
});