I am trying to fetch Google news with the News Search API using AngularJS, but I am having some issues. I need help please.
Below is my HTML page where I've included the necessary libraries AngularJS, ngAutocomplete and another Google Library. the ngAutocomplete library allows me to get basic information (such as geocoding, administrative boundaries and other geo-parameters) from the Google API, that I can then use to query the News Search API.
<html lang="en" ng-app="StarterApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script src="script.js" type="text/javascript"></script>
<script src="ngAutocomplete.js"></script>
</head>
<body ng-controller="AppCtrl">
<form id="form" role="form">
<input type="text" id="Autocomplete" ng-autocomplete="result1" details="details1" options="options1">
</input-container>
<button data-ng-click="findNews(result1)">Search</button>
</form>
<div data-ng-repeat="news in newsData">
<img src="{{news.image.url}}}"alt="{{news.title}}">
<h2>{{news.title}}</h2>
<p>{{news.content}}</p>
</div>
</body>
</html>
Here is my script.js
(function(){
'use strict;'
angular.module('StarterApp', ['ngMaterial', 'ngAutocomplete'])
.controller('AppCtrl', ['newsService', '$scope', '$mdSidenav', function(newsService, $scope, $mdSidenav){
$scope.toggleSidenav = function(menuId) {
$mdSidenav(menuId).toggle();
};
function fetchNews(result1){
newsService.getNews(result1).then(function(data){
$scope.location = data;
});
}
fetchNews('San Francisco');
$scope.findNews = function(result1){
$scope.location = '';
fetchNews(result1);
};
}])
.factory ('newsService', ['$http', '$q', function($http, $q){
function getNews(result1){
var deferred = $q.defer();
$http.get('https://ajax.googleapis.com/ajax/services/search/news?v=1.0&q=' + result1)
.success(function(data){
newsData = data.responseData.results;
console.log(newsData);
})
.error(function(err){
console.log('Error retrieving News');
deferred.reject(err);
});
return deferred.promise;
}
return{
getNews:getNews
}
}])
})();
When I type San Francisco, and then click the search button, the app get the user input and queries the Google News Search API and then return an object.
The query returns a News object from the News Search API; I can see it on the console.log but unfortunately I cannot display them on the page using ngRepeat.
<div data-ng-repeat="news in newsData">
<img src="{{news.image.url}}}"alt="{{news.title}}">
<h2>{{news.title}}</h2>
<p>{{news.content}}</p>
</div>
The full code is on Plunker http://plnkr.co/4vbaWZvcSRMGXppA5sXY or http://run.plnkr.co/plunks/eevO0F/
