9

I tried this code with no success

$http({
    method:"GET",
    url:"data/mycooljsonfile.json",
    eventHandlers:{
        onprogress:function(event){
        console.log("progress");
        console.log(event);
    },onreadystatechange:function(event){
        console.log("change");
        console.log(event);
    }
    },
    uploadEventHandlers:{
         onprogress:function(object){
              console.log(object);
         }
    }
})
.success(function(json){ // succès
     $scope.lemmes=json;
      //console.log($http);
}).error(function(error){ // erreur
    console.log(error);
});

I checked here :

https://docs.angularjs.org/api/ng/service/$http

and there :

https://www.w3.org/TR/XMLHttpRequest/#events

It is just that I would like to improve my code with a progress bar on a big json file download to the app.

By the way, I could not find a way to log the overall $http object's functions and supported events as it returns a promise object with few info.

7
  • stackoverflow.com/a/3694435/949476
    – dfsq
    Commented Jun 26, 2016 at 11:39
  • I know it is possible to do it in pure javascript, my question is about using Angular JS version 1, it is in the title.
    – Mantisse
    Commented Jun 26, 2016 at 15:38
  • Scratching around this for a few days now. No events fired :(
    – appbootup
    Commented Jul 6, 2016 at 14:48
  • Drat . Found the solution. Update to angularjs 1.5.5 :D
    – appbootup
    Commented Jul 6, 2016 at 15:29
  • Great, wish I could participate to the docs if I could. @SSR Can I have a link to a use case.
    – Mantisse
    Commented Jul 9, 2016 at 19:51

1 Answer 1

9

Don't use onprogress, use just progress, same with other events. I prepare a plunkr to demonstrate:

  $http({
      method: "GET",
      url: "data.json",
      eventHandlers: {
        progress: function(event) {
          console.log("progress");
          console.log(event);
        },
        readystatechange: function(event) {
          console.log("change");
          console.log(event);
        }
      },
      uploadEventHandlers: {
        progress: function(object) {
          console.log(object);
        }
      }
    })
    .success(function(json) { // succès
      $scope.lemmes = json;
      //console.log($http);
    }).error(function(error) { // erreur
      console.log(error);
    });

Also, there was a bug that has been fixed in angular 1.5.5 as it can be seen from the CHANGELOG. Update to the 1.5.5 or higher and it will work.

2
  • thanks for the answer, I will try this in my free time. Cheers.
    – Mantisse
    Commented Aug 16, 2017 at 18:27
  • @mantisse accept it with a green tick and I will get some karma
    – ganqqwerty
    Commented Aug 20, 2017 at 20:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.