Read data from a mongodb database using vuejs and nodejs

Question

I'm creating a web application to visualize in real time the temperature of my room. Currently I read the value with raspberry and then load the database Mongodb. Now to display it in real time on my browser how do I do it? I'm using Node.js and vue.js together with express. How do I pass the value to Vue.js in real time?

var App = Vue.component('App',{
    template: "<h1> {{title}} </h1>",
    data() {
    
        let test= "hello";
        return {title: test};
    }
});

new Vue({
    el:"#app"
});

<div id="app">
   <App></App>
</div>

Boussadjra Brahim · Accepted Answer · 2018-11-13 01:33:46Z

Your code in backend should be like this :

//get the value from db
//create a variable tmp that will receives temperature from db
let tmp;


var router = express.Router();
router.get('/temperature', function(req, res) {
  res.json({
    temperature: tmp
  });
});


app.use('/api', router);

in the front you have access to that api :

localhost:8080/api/temperature

And using axios you could make call to your backend and get back the temperature in real time

var App = Vue.component('App', {
  template: "<h1> {{temperature}} </h1>",
  data() {


    return {
      temperature: 0
    };
  },
  created: function() {

    this.fetchTemp('api/temperature');

    setInterval(()=> {
      this.fetchItems('api/temperature');
    }, 500);
  },

  methods: {

    fetchTemp(uri) {

      axios.get(uri).then((res) => {
        this.temperature = res.data.temperature;
      });
    },
  }
});

I tried to simulate your use case by getting the current time from REST API and show it every second

new Vue({
  el: '#app',
  data() {
    return {
      now: 0
    };
  },
  created: function() {

    this.fetchTemp('https://script.googleusercontent.com/a/macros/esi.dz/echo?user_content_key=ypoXRw1nVHj-h1VRDmh6TXSI1VpIPWW7Qo2n9El6RqoxAJ3v28nBI9bDY_4UAE0TQJ3pSozxpbTiRvFpmD8pvcTkGSnPAtgRm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_nRPgeZU6HP_B2BW4qWwVPUuHIcJ3mEdrfLIfNZsYUQi0c--vxV_3BX606CngcowlqSfFH8SSiqMPrUuXDMsd72r-P39_jlVDMh0BMLnMwXU02UuEHWiuob4ULL2SJgrtyBAf43AAwP8&lib=MwxUjRcLr2qLlnVOLh12wSNkqcO1Ikdrk');

    setInterval(() => {
      this.fetchTemp('https://script.googleusercontent.com/a/macros/esi.dz/echo?user_content_key=ypoXRw1nVHj-h1VRDmh6TXSI1VpIPWW7Qo2n9El6RqoxAJ3v28nBI9bDY_4UAE0TQJ3pSozxpbTiRvFpmD8pvcTkGSnPAtgRm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_nRPgeZU6HP_B2BW4qWwVPUuHIcJ3mEdrfLIfNZsYUQi0c--vxV_3BX606CngcowlqSfFH8SSiqMPrUuXDMsd72r-P39_jlVDMh0BMLnMwXU02UuEHWiuob4ULL2SJgrtyBAf43AAwP8&lib=MwxUjRcLr2qLlnVOLh12wSNkqcO1Ikdrk');

    }, 1000);
  },

  methods: {

    fetchTemp(uri) {

      axios.get(uri).then((res) => {
        this.now = new Date(res.data.fulldate).toLocaleString();


      }).catch(err => {});
    }
  }
})

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/vue-axios.min.js"></script>
</head>

<body>
  <div id="app">
    <h1> Now : {{now}} </h1>
  </div>
</body>

</html>

Collectives™ on Stack Overflow

Read data from a mongodb database using vuejs and nodejs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related