CODEWITHSUNDEEP
javascriptjqueryjsonangularjsgoogle-feed-api
MattDionis
MattDionis

Reputation: 3616

Using Angular to get image from Google Feed API

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

Upvotes: 2

Views: 3183

Answers (1)

sylwester
sylwester

Reputation: 16498

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

    })
});

Upvotes: 1

Related Questions