Search code examples
javascriptnode.jsfeathersjs

How to update html document using feather js?


I have a service that I call after every 5 secs to return data from postgres table, now I want this data to be displayed on html document

app.js

const stats=app.service('test_view');
// console.log(stats);
function getstats(){
stats.find().then(response=>{
    console.log('data is ',response.data)});};
setInterval(function() {
  getstats();
}, 5000);
// console.log(stats);

stats.html

<!DOCTYPE html>
<html>
<head>
  <title>Stats</title>
  <script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id='stats'>
</div>
</body>
</html>

Everything is running fine and I am getting results in console, I am using feather.js now I want these results to be displayed in div tag of html.Please help me in this regard.


Solution

  • You need to call the feathers service from the browser. You can do this a number of different ways (as a REST call, with the feathers client, etc.).

     <html lang="en">
       <head>
             <meta charset="UTF-8">
             <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/core-js/2.1.4/core.min.js"></script>
             <script src="//unpkg.com/@feathersjs/client@4.0.0-pre.3/dist/feathers.js"></script>
             <script src="//unpkg.com/axios/dist/axios.min.js"></script>
        <script>
          // @feathersjs/client is exposed as the `feathers` global.
          const app = feathers();
          app.configure(feathers.rest('http://localhost:3000').axios(axios));
          app.service('test_view').find();
          })
          .then(data => {
            // do something with data
          });
        </script>
       </head>
       <body></body>
     </html>
    

    A lot of this depends on what (if anything) you're using for your front-end implementation. This sets up a minimal feathersjs/client using axios for REST, with no authentication, and calls your service (on port 3000) and gets the payload.

    To do this every 5 seconds is outside the scope of feathers and up to how you build your web app.