how to get data from a json file in real time

Question

I try to make this for a long time and i wrote some test script .I use setInterval to update the content once at 500s but i can't acces the inputs for exemple if i have a form there i don't know how i can write in input without the write been deleted.I use setInterval because i want to see every input from the database .

The index script

    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <body>

    <div ng-app="myApp" ng-controller="customersCtrl"> 

    <ul>
      <li ng-repeat="x in myData">
       <a href="http://php.net/manual/ro/function.json-encode.php"> {{ x.Name + ', ' + x.Country }}</a><input type="text" />
      </li>
    </ul>

    </div>

    <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
     setInterval(function(){$http.get("customers.json").then(function (response) {
          $scope.myData = response.data.records;
      });},500); 
    });
    </script>

    </body>
    </html>

And the json file

{
  "records": [
    {
      "Name": "Alfreds Futterkiste",
      "City": "Berlin",
      "Country": "Germany"
    },
    {
      "Name": "Ana Trujillo Emparedados y helados",
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "Name": "Antonio Moreno Taquería",
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "Name": "Around the Horn",
      "City": "London",
      "Country": "UK"
    },
    {
      "Name": "B's Beverages",
      "City": "London",
      "Country": "UK"
    },
    {
      "Name": "Berglunds snabbköp",
      "City": "Luleå",
      "Country": "Sweden"
    },
    {
      "Name": "Blauer See Delikatessen",
      "City": "Mannheim",
      "Country": "Germany"
    },
    {
      "Name": "Blondel père et fils",
      "City": "Strasbourg",
      "Country": "France"
    },
    {
      "Name": "Bólido Comidas preparadas",
      "City": "Madrid",
      "Country": "Spain"
    },
    {
      "Name": "Bon app'",
      "City": "Marseille",
      "Country": "France"
    },
    {
      "Name": "Bottom-Dollar Marketse",
      "City": "Tsawassen",
      "Country": "Canada"
    },
    {
      "Name": "Cactus Comidas para llevar",
      "City": "Buenos Aires",
      "Country": "Argentina"
    },
    {
      "Name": "Centro comercial Moctezuma",
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "Name": "Chop-suey Chinese",
      "City": "Bern",
      "Country": "Switzerland"
    },
    {
      "Name": "Comércio Mineiro",
      "City": "São Paulo",
      "Country": "Brazil"
    },
     {
      "Name": "Comércio Mineiro",
      "City": "São Paulo",
      "Country": "Brazil"
    },
     {
      "Name": "Comércio Mineiro",
      "City": "São Paulo",
      "Country": "Brazil"
    },{
      "Name": "Bon app'",
      "City": "Marseille",
      "Country": "France"
    },
    {
      "Name": "Bottom-Dollar Marketse",
      "City": "Tsawassen",
      "Country": "Canada"
    },
    {
      "Name": "Cactus Comidas para llevar",
      "City": "Buenos Aires",
      "Country": "Argentina"
    },
    {
      "Name": "Centro comercial Moctezuma",
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "Name": "Chop-suey Chinese",
      "City": "Bern",
      "Country": "Switzerland"
    },
    {
      "Name": "Comércio Mineiro",
      "City": "São Paulo",
      "Country": "Brazil"
    },
    {
      "Name": "Bottom-Dollar Marketse",
      "City": "Tsawassen",
      "Country": "Canada"
    },
    {
      "Name": "Cactus Comidas para llevar",
      "City": "Buenos Aires",
      "Country": "Argentina"
    },
    {
      "Name": "Centro comercial Moctezuma",
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "Name": "Chop-suey Chinese",
      "City": "Bern",
      "Country": "Switzerland"
    },
    {
      "Name": "Comércio Mineiro",
      "City": "São Paulo",
      "Country": "Brazil"
    }
  ]
}

if you use angular, why you do not use `$timeout` instead of `setInterval` ? — Rafael Herscovici, Jul 09 '17 at 22:30
Possible duplicate of [AngularJS and web workers](https://stackoverflow.com/questions/16713925/angularjs-and-web-workers) — Rafael Herscovici, Jul 09 '17 at 22:31
i have marked your question as a duplicate, since you probably are just addressing the issue wrong. Please see the link attached to learn how to do it correctly in angular. https://stackoverflow.com/questions/16713925/angularjs-and-web-workers — Rafael Herscovici, Jul 09 '17 at 22:32
I don't see anything that suggests this has anything to do with web workers. I don't actually understand why you'd expect a json file to keep updating. If you do, probably the solution is to add url parameters to the end so you're not getting it from the cache. — Amy Blankenship, Jul 09 '17 at 23:07

score 0 · Accepted Answer · answered Jul 10 '17 at 00:19

If you want do real-time application, nodejs + socket.io (websocket) will best fit your needs. Here is an example of how to use socket.io(websocket lib):

https://socket.io/get-started/chat/

In addition, any ajax calls will takes time, can easily take more then one second. Therefore, real-time web application need to use websocket instead of transitional ajax call.

how to get data from a json file in real time

1 Answers1