Refreshing JSON data in AngularJS periodically and dynamically updating the interface

Question

Refreshing JSON data in AngularJS periodically and dynamically updating the interface

I have been trying to figure out how to update my $http json request at regular intervals and simultaneously update my bindings with the new data. I've come across examples using $timeout, but I haven't been successful in implementing it. I'm looking for the best approach to achieve this. Additionally, I am struggling to find a way to update the views with the newly fetched data.

Below is my current setup:

In the app.js file, I have the initial fetch for the json.

    var myApp = angular.module('myApp', ['ngRoute']);

    myApp.controller('MainCtrl', ['$scope', '$http',
        function($scope, $http, $timeout) {
            $scope.Days = {};

            $http({
                method: 'GET',
                url: "data.json"
            })
                .success(function(data, status, headers, config) {
                    $scope.Days = data;
                })
                .error(function(data, status, headers, config) {
                    // something went wrong :(
                });

        }
    ]);

The HTML structure:

<ul ng-controller="MainCtrl">
  <li class="date" ng-repeat-start="day in Days">
    <strong>>{{ day.Date }}</strong>
  </li>

  <li class="item" ng-repeat-end ng-repeat="item in day.Items">
    <strong>>{{ item.Name }}</strong>
  </li>
</ul>

javascript json angularjs

Answer 1

Answer №1

To handle this situation, I suggest using the $timeout function.

You may already know that the $timeout function returns a promise. This means that when the promise is resolved, we can then call the myLoop method again.

In the code example below, we are making an HTTP request every 10 seconds:

var timer;

function myLoop() {
    // Calling $timeout sets up a promise object.
    timer = $timeout(function () {
        console.log("Timeout executed", Date.now());
    }, 10000);

    timer.then(function () {
        console.log("Timer resolved!");

        $http({
            method: 'GET',
            url: "data.json"
        }).success(function (data, status, headers, config) {
            $scope.Days = data;
            myLoop();
        }).error(function (data, status, headers, config) {
            // Something went wrong :(
        });
    }, function () {
        console.log("Timer rejected!");
    });

}

myLoop();

Additional information:

Remember to cancel the timer using $timeout.cancel( timer ); when the controller is destroyed.

// When the DOM element is removed from the page,
// AngularJS will trigger the $destroy event on
// the scope. 
// Cancel timeout
$scope.$on("$destroy", function (event) {
    $timeout.cancel(timer);
});

Demo Fiddle

Answer 2

To handle this situation, I suggest using the $timeout function.

You may already know that the $timeout function returns a promise. This means that when the promise is resolved, we can then call the myLoop method again.

In the code example below, we are making an HTTP request every 10 seconds:

var timer;

function myLoop() {
    // Calling $timeout sets up a promise object.
    timer = $timeout(function () {
        console.log("Timeout executed", Date.now());
    }, 10000);

    timer.then(function () {
        console.log("Timer resolved!");

        $http({
            method: 'GET',
            url: "data.json"
        }).success(function (data, status, headers, config) {
            $scope.Days = data;
            myLoop();
        }).error(function (data, status, headers, config) {
            // Something went wrong :(
        });
    }, function () {
        console.log("Timer rejected!");
    });

}

myLoop();

Additional information:

Remember to cancel the timer using $timeout.cancel( timer ); when the controller is destroyed.

// When the DOM element is removed from the page,
// AngularJS will trigger the $destroy event on
// the scope. 
// Cancel timeout
$scope.$on("$destroy", function (event) {
    $timeout.cancel(timer);
});

Demo Fiddle

Refreshing JSON data in AngularJS periodically and dynamically updating the interface

Answer №1

Similar questions

Obtaining the id in JavaScript from PHP to display information

What is the best way to enable a DOM element's height to be resized?

The slideUp/slideDown feature allows for the smooth sliding of all submenu elements

JavaScript's `indexOf` function can sometimes return false when it should actually return true

Display a loading GIF for every HTTP request made in Angular 4

Create a fresh new scope by incorporating an object within an ng-repeat

Deleting the v-stepper-header number with Vuetify

A guide on invoking a Struts 2 action with a different parameter for each row in a jQuery DataTable

What is the method for including a placeholder with sequential numbering?

Guide on displaying the appropriate component in NextJs routes

Transmitting multiple parameters via the URL using Ajax

Updating a property in an object within an Angular service and accessing it in a different controller

Ways to align this element in the middle

Create a new array by dynamically generating a key while comparing two existing arrays

Issues with simple jquery and javascript: unable to add the class ".has-error" and onclick event not properly defined

When utilizing the Express framework, the object req.body is initially empty when collecting data from a basic

The error message "undefined is not a function" occurred in Protractor and the operation failed

jQuery button click event not registering

The model fails to refresh within the controller

Listening to events in controllers to update the view in AngularJS