I make a query to a .json file and with the answer I make a table but because the .json file is constantly updated, I need to be observing if that file has changed to show it in real time in the application, and I have tried but I can not get the two way data binding.
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":"diana",
"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>