angular callback api add error message if fails

Question

I am currently writing an Angular application that communicates with the flickr API. In order to utilise the response from flickr you need to define a jsonFlickrFeed callback function. Please see answer here for details on how this works

Everything is working fine in my angular app. I am getting the response and showing the data on the screen.

However, to improve UX I would like to show an error message to the user if the data does not load, but I cannot figure out how to display this message. The way I thought it would work, always logs an error the way the API works. Please see my attempt below:

app.controller('testCtrl', function (getFlickrData) {
   var testCtrl = this;
   this.loading = true;
   this.error = false;

   //call to get the data from Flickr
   getFlickrData.getData().catch(function (err) {
       //show error
       console.log(err)
       testCtrl.error = true;
   })
   .finally(function () {
     // Hide loading spinner whether our call succeeded or failed.
     testCtrl.loading = false;
   });

   //API requires jsonFlickrFeed callback function
   jsonFlickrFeed = function(data){
     console.log(data);
   } 
});

and here is the factory I am using 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 err logged in the console looks like this:

{data: undefined, status: 404, config: Object, statusText: "error"}

and finally here is the html which is always shown, even if the content loads successfully.

<div ng-show="testCtrl.error" class="error">
   <p>Sorry but there has been an error with loading content. Please try again soon.</p>
</div>

I guess to sum up my question is how to check success/failure of a callback (possibly)

Here is a jsfiddle that may make it easier to see the problem I am trying to solve

Does something like this help? http://jsfiddle.net/zkqrcbxn/1/ — Narain Mittal, Mar 11 '16 at 23:56
unfortunately not, it is still giving an error with the api even when it is successful, as there is an error before the callback — Paul Fitzgerald, Mar 12 '16 at 00:19
Should the ng-show="ctrl.error" be ng-show="testCtrl.error == true"? — KennyE, Mar 12 '16 at 00:22
@KennyE thanks for the suggestion. Unfortuantely that's not it, i changed the `var` names for the question, and `ng-show` will show if its true, you dont have to state `condition === true`. If you try the code and inspect the `err` in the console you will understand the issue — Paul Fitzgerald, Mar 12 '16 at 00:25
testCtrl needs to be on the $scope object too. The convention is to inject $scope into the controller then do $scope.testCtrl.error = true. Is there a reason you are not using $scope in the controller? — KennyE, Mar 12 '16 at 00:56
there is a reason - it is advised to use `controllerAs` syntax --- see here https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#controllers It is nothing to do with the syntax. It is because the API requires a callback function to see the data. You need to look at this post and you will have a better understanding - http://stackoverflow.com/questions/28373389/printing-flickr-api-response-to-console-angularjs — Paul Fitzgerald, Mar 12 '16 at 01:01
I'm not clear what the problem is you are trying to solve. I'm assuming the error message is not showing on the screen. I have never used 'this' instead of $scope. Only things added to $scope are available in HTML templates so if 'this' is being used in place of $scope then ng-show would need to check for 'error' and not 'testCtrl.error' as 'error' is defined on 'this/$scope. — KennyE, Mar 12 '16 at 01:09
I am able to show the error message. The problem is that it is always shown, even when there is a successful response from the server. The reason is the `getFlickrData.getData()` shows an error as the `jsonFlickrFeed` callback function is what is returning the data — Paul Fitzgerald, Mar 12 '16 at 01:24

Konkko · Accepted Answer · 2016-03-12T01:23:32.680

1

Hope this wont fail you anymore :)

According to AngularJS API in $http there was no finally only success and error can be used here.

app.controller('testCtrl', function (getFlickrData) {
   var testCtrl = this;
   this.loading = true;
   this.error = false;

   getFlickrData.getData().success(function (data) {
       console.log(data);
       testCtrl.loading = false;
   })
   .error(function () {
     testCtrl.loading = false;
     testCtrl.error = true;
   });

})
.factory('getFlickrData', function($http){
    return{
        data:{},
        getData: function(){
            var self = this;
            return $http.jsonp("https://api.flickr.com/services/feeds/photos_public.gne?tagmode=all&format=json&jsoncallback=JSON_CALLBACK");
        }
    }
});

edited Mar 12 '16 at 01:23

answered Mar 11 '16 at 23:59

Konkko

662
4
15

I dont think this works. Do you not get an error message in the console? – Paul Fitzgerald Mar 12 '16 at 00:15
Sorry about that should be fixed – Konkko Mar 12 '16 at 00:23
I still don't think so. If you look in the console you will see that the `err` message is still been shown. I need to check the `success` of the callback if that is possible – Paul Fitzgerald Mar 12 '16 at 00:26
Try it out now should be ok – Konkko Mar 12 '16 at 01:24
That worked. would you mind explaining in a little more detail how it works in the answer. some extra explanation would be great – Paul Fitzgerald Mar 12 '16 at 01:44
In angular's API it says "Relative or absolute URL specifying the destination of the request. The name of the callback should be the string JSON_CALLBACK." And when you go and look Flickr's Callback Function it mentions this "To define your own callback function name, add the parameter `jsoncallback` with your desired name as the value." You don't need the callback function because angular will transform the callback function into the success. – Konkko Mar 12 '16 at 01:47
And naturally if the server returns something else than 200 it will go to error function. – Konkko Mar 12 '16 at 01:53

angular callback api add error message if fails

1 Answers1

Linked