2

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;
    });
});

1 Answer 1

1

Please see here: http://jsbin.com/xidik/1/edit or there http://jsbin.com/xidik/3/edit is finding image for each feeds.

Add the $q service to your 'FeedList' service, then in your FeedController iterate through your data when promise will is resolved to find image.

var app = angular.module('app', ['ngResource']);

var feeds = [];

app.factory('FeedLoader', function ($resource) {
    return $resource('http://ajax.googleapis.com/ajax/services/feed/load', {}, {
        fetch: { method: 'JSONP', params: {v: '1.0', callback: 'JSON_CALLBACK'} }
    });
});

app.service('FeedList', function ($rootScope, FeedLoader, $q) {
    this.get = function() {
        var deferred= $q.defer();
        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);
                    deferred.resolve(feeds);
                });
            }
        }

        return deferred.promise;
    };
});

app.controller('firstCtrl', function($scope, FeedList) {
    FeedList.get().then(function(data){
        $scope.feeds = data;

        angular.forEach(data[0].entries, function(value) {
            value.sapleImage =$(value.content).find('img').eq(0).attr('src');
        });       

    })
});
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.