Currently engaged in developing an Angular application that interacts with the flickr API. To effectively use the response from flickr, it is necessary to define a jsonFlickrFeed callback function. Check out this link for detailed instructions.
The functionality of my angular app is flawless; I receive the response and display the data on the screen without any issues.
However, I want to enhance the user experience by displaying an error message if the data fails to load. Unfortunately, I am struggling to implement this feature as the usual method I had in mind always triggers an error due to the nature of the API. Here's what I have attempted:
app.controller('testCtrl', function (getFlickrData) {
var testCtrl = this;
this.loading = true;
this.error = false;
//Retrieve data from Flickr
getFlickrData.getData().catch(function (err) {
//Display error
console.log(err)
testCtrl.error = true;
})
.finally(function () {
// Hide loading spinner regardless of success or failure.
testCtrl.loading = false;
});
//Callback function required by the API
jsonFlickrFeed = function(data){
console.log(data);
}
});
Below is the factory I utilize to make the GET request to Flickr:
app.factory('getFlickrData', function($http){
return{
getData: function(){
return $http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?tagmode=all&format=json');
}
}
});
The error logged in the console appears as follows:
{data: undefined, status: 404, config: Object, statusText: "error"}
Finally, here is the html section that consistently displays, even when content loads successfully:
<div ng-show="testCtrl.error" class="error">
<p>Apologies, but there was an issue loading the content. Please try again later.</p>
</div>
In essence, my question boils down to how to assess the success/failure of a callback (potentially).
You can view a relevant jsfiddle here to better understand the problem I am attempting to resolve.