Angular Code with Promise works in Firefox but not in Chrome?

Question

I have a URL from where I pick Chuck Norris Jokes. Basically in order to get 100 jokes I hit the URL 100 times and store the result in an array and do an ng-repeat. Pretty straight forward. Problem comes when I execute the same code on google Chrome. It just fetches the data for the first hit and then does not hit the URL and fills the entire array with the first data. I am not able to get why there is two different behavior for the same code. Please help. It works perfectly in firefox but not in google chrome. You can find the code on Fiddle . Try running the same code on Chrome and Firefox and you will notice the difference. Please help.

The code is as follows :-

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

/**
 * Created by roger on 25/2/14.
 */
app.controller('JokeCtrl',['$scope','$http','$q',function($scope,$http,$q){
    $scope.pageTitle="JokeApp";
    $scope.data={"jokeList":[]};
    $scope.services={};
    $scope.processing={};
    $scope.processBusy=true;
    $scope.dataTemplate=function(id,joke,category){
        return {
            "id":id,
            "joke":joke,
            "category":category
        };
    };

    $scope.getJoke = function(callback) {
        return $http.get("http://api.icndb.com/jokes/random?limitTo=[nerdy]").success(
            function(data) {
                return callback($scope.dataTemplate(data.value.id,data.value.joke,data.value.categories[0]));
            }
        );
    };
    $scope.getJokes = function () {
        var prom = [];
        for(var i=0;i<10;i++){
            prom.push($scope.getJoke(function(value){
                $scope.data.jokeList.push(value);
            }));
        }
        $q.all(prom).then(function () {
            console.log("DONE!!!");
            console.log($scope.data.jokeList);
            $scope.processBusy=false;
        });
    };

    $scope.getJokes();
}]);

And HTML Goes Like

<div class="container-fluid" ng-app="JokeApp" ng-controller="JokeCtrl">
    <table class="table-responsive" ng-show="!processBusy">
        <thead>
            <tr>
                <th>ID</th>
                <th>Joke</th>
                <th>Categories</th>
            </tr>
        </thead>
        <tbody>
        <tr ng-repeat="data in data.jokeList">
            <td>{{data.id}}</td>
            <td>{{data.joke}}</td>
            <td>{{data.category}}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>

score 0 · Accepted Answer · answered Feb 26 '14 at 03:40

0

Could it be that Chrome is caching the results of the first request and just reusing those?

What if you added a random query param value at the end of the request URL? If it is a browser caching issue, adding &a=<random-number> at the end should prevent caching since the requested URL is different each time.

So instead of always asking for

$http.get("http://api.icndb.com/jokes/random?limitTo=[nerdy]")

Try

$http.get("http://api.icndb.com/jokes/random?limitTo=[nerdy]&foo=" + Math.random())

Update:

It looks like that was the issue, you can see it fetching different jokes here: http://jsfiddle.net/V8ztg/

It is also now slower since it's making more network calls (as you want it to)

answered Feb 26 '14 at 03:40

jCuga

1,523
3
16
28

Does anyone know if there's a built-in angular interceptor to do this? I see someone did their own interceptor here: http://stackoverflow.com/questions/16971831/better-way-to-prevent-ie-cache-in-angularjs see the answer by dillip pattnaik – jCuga Feb 26 '14 at 03:44
Your random Chuck Norris joke fetcher is actually pretty cool--might have to bookmark the jsfiddle for later – jCuga Feb 26 '14 at 03:46

Angular Code with Promise works in Firefox but not in Chrome?

1 Answers1