How to make a new request with $http.get every 3 seconds and get data outside function

Question

I want to get some data from this page http://orbit5.ds.cs.umu.se:8888/vrio/debug/blk. the data on this page updates every time you refresh the page. So I would like to have these updated values. In order to update the values I could use $timeout but then I need to somehow get these values outside of getdata because I want to then plug these values into another function for making a chart otherwise the whole chart will keep on rendering every time the function updates. and I cannot get the values outside of the function I found this answer on stackoverflow but most of the answers as far as I understand use data from inside the function.

How can I get the updated values outside of the JavaScript function and plug them into another function? Or maybe there is another better approach to solve this problem?

my code:

    function getData(){
  var data;

  $http.get(path).then(function(response){
    data = response.data
    console.log(response.data) //works fine
  })
  return data
}

console.log(data)//returns undefined

Now If I want to update the function with $timeout

I would need to do something like this

$timeout(getData, 3000)

now how can I get to these updated values?

Edit:

var  myData =  setInterval( function(){
   $http.get(path).then(function(response){
    return response.data['Block Devices']
  })
}, 1000 );

console.log(myData)
  });

returns 14 I dont know what that is but certainly not right data

Answer 1

Use $q of angular, you need to inject $q as dependency,

function getData(){

  var deffered = $q.defer();
  var data;
  $http.get(path).then(function(response){
    data = response.data
    $q.resolve(data);
  })
  return deffered.promise;
}

var getDataCall = getData();

getDataCall.then(function(data){
console.log(data);
})

if you want to repeat this call use, $interval(fn, delay, [count], [invokeApply], [Pass]);

see doc https://docs.angularjs.org/api/ng/service/$interval

Try this for repeating, (i haven't tried),

function getData(){   
  var deffered = $q.defer();
  var data;
  $http.get(path).then(function(response){
    data = response.data
    $q.resolve(data);
  })
  return deffered.promise;
}


$interval(function(){
  getData().then(function(data){
  console.log(data);
  });
},3000);

Answer 2

You just need to run the code in an interval:

setInterval( function(){
    $http.get(path).then(function(response){
        console.log(response.data);
        // Update your page here
    });
}, 3000 );

Answer 3

You want to use Angular's $interval module to do this.

Essentially, you have a function called getData which uses the $http module. Then, in the resolution of that promise, you set the $scope.chartData with the new data.

You then call that function on an interval:

$interval($scope.getData, 3000); // every 3 seconds

You don't need $q if you do this in your controller, but you should probably take it out of the controller and put it in a service and then use the $q module.

Here is a CodePen on HTTP polling in Angular with a full Angular app as the solution that works with your provided endpoint.

Update: If you wanted to call it from an external function outside of your controller, you can do that by creating a factory that uses $q and injecting that into your controller. The same example but with a factory: CodePen on HTTP polling in Angular (using a factory)

You'll also note the $scope.getBytesWritten method in the example with the factory/service. You need to execute a function in order to get part of the data—simply trying to access a property of the chart data won't update that single value. Please refer to the CodePen on HTTP polling in Angular (using a factory).

Answer 4

Hi,

In AngularJS , there is a service called $timeout , that does exactly what you're looking for in one loop.

Check the whole official documentation here : $timeout service documentation

Answer 5

Using the $interval service with the $http service

The $http service returns a promise that you can use for chaining. Use the $interval service to repeditively create an new promise and chain from that promise to put the updated data on scope.

Return that promise and chain from it.

angular.module("myApp").controller("myVm",
  function($scope,$http,$interval) {
    var count = 0;

    function getHttpPromise(url) {
        var promise = $http.post(url);
        //return for chaining
        return promise;
    };

    function updateScope(promise) {
        //chain from promise
        promise.then (function (response) {
            count++;
            $scope.currentCount = "Current response "+count;
        });        
    };

    updateScope(getHttpPromise("/echo/json"));

    var intervalPromise =  $interval( function(){
        updateScope(getHttpPromise("/echo/json"));
    }, 1000 );

    $scope.onStopUpdate = function () {
        $interval.cancel(intervalPromise);
    });
});

The above example has a function getHttpPromise that returns a promise for chaining. The updateScope function chains from the httpPromise to update the scope. The example then uses the $interval service to update the scope every 1000 milliseconds.

The $interval service also returns a promise that can be used for chaining and for cancellation.

The DEMO on JSFiddle.