How to get two-way data binding with a Service in AngularJS?

Question

I do a query to a JSON file and with the result I make a table, but as this file is updated very frequently, I need to see constantly if this file has suffered changes to show them in a real time application.

I have tried many things with AngularJS but every time has result in fails.

This is my code:

app.js

(function(){
   var myapp = angular.module("appMonitor",[]);


   myapp.factory('myService', function($http,$timeout) {
      var promise;
      var myService = {
         get: function() {
             if ( !promise ) {
                 // $http returns a promise,
                 // which has a then function, which also returns a promise
                 promise = $http.get('./json/verifyEmpty.json').then(function (response) {
                 // The then function here is an opportunity to modify the response
                 console.log(response.data);
                 // The return value gets picked up by the then in the controller.
                 return response.data;
                 });
              }
              // Return the promise to the controller
              return promise;
           }
        };
      return myService;
    });


    myapp.controller('monitorCtrl', function(myService,$scope) {
    // Call the async method and then do stuff with what is returned inside our own then function
        myService.get().then(function(d) {
            $scope.response = d;
        });
    });

})();

verifyEmpty.json

[
  { "name":"luis", "lastname":"perez", "age":27, "gender":"m", "haircolor":"yellow", "eyecolor":"brown", "student":false },
  { "name":"monse", "lastname":"chuang", "age":28, "gender":"f", "haircolor":"black", "eyecolor":"black", "student":true },
  { "name":"sarah", "lastname":"lee", "age":29, "gender":"f", "haircolor":"yellow", "eyecolor":"green", "student":true },
  { "name":"luisa", "lastname":"ortega", "age":28, "gender":"f", "haircolor":"black", "eyecolor":"blue", "student":false },
  { "name":"lorenza", "lastname":"garcia", "age":27, "gender":"f", "haircolor":"brown", "eyecolor":"brown", "student":true }
]

monitor.php

 <body ng-app="appMonitor">
    <div class="" ng-controller="monitorCtrl">
    <table>
       <tr>
          <th><strong>name</strong></th>
          <th><strong>lastname</strong></th>
          <th><strong>age</strong></th>
          <th><strong>gender</strong></th>
          <th><strong>haircolor</strong></th>
          <th><strong>eyecolor</strong></th>
          <th><strong>student?</strong></th>
       </tr>

       <tr ng-repeat="r in response" ng-cloak>
          <td>{{r.name}}</td>
          <td>{{r.lastname}}</td>
          <td>{{r.age}}</td>
          <td>{{r.gender}}</td>
          <td>{{r.haircolor}}</td>
          <td>{{r.eyecolor}}</td>
          <td ng-show="r.student">Yes</td>
        </tr>


    </table>
       <!-- {{response}} -->
    </div>
    <script type="text/javascript" src="./js/148libraries/angular.min.js"></script>
    <script type="text/javascript" src="./js/app.js"></script>
 </body>

score 1 · Answer 1 · edited May 23 '17 at 12:31

You can't do exactly what you want, but you can achieve something similar.

With the code that you have posted, you are retrieving the JSON contents just one time. So, I imagine that in your complete code, that you are constantly executing the $http.get() and pooling the JSON files after X seconds using setTimeout() or something similar. This is the easiest way, but not the most efficient.

Since your JSON file is hosted in another machine, your Angular code, that runs in the client's browser can't know when the file has changed. It must be warned by someone else.

In this case, the first thing you need to implement at the server-side is a routine that is triggered when the JSON file changes. For this task, as it seems that you are using PHP, you can take a look at inotify and this answer.

The second part is to implement a Streaming approach in Angular instead of a Pooling mechanism. Since I don't know the PHP tools very well, I can't find one right now to suggest to you. If you could use Node, I would suggest you to take a look at Pusher and in this tutorial.

With this approach, you would set a Node server to be listening to changes in your JSON file and your Angular service to be listening to Node. Whenever the file is changed, it will trigger the Node and Angular to update your table view.

Note: its a one-way data bind. A two-way data bind would be to $watch for variable changes made by your users at the browser and when $watch receives an event, you would make a $http call to update the JSON file.

How to get two-way data binding with a Service in AngularJS?

1 Answers1