Display variable in HTML

help
1

I have the following code

if (Meteor.isClient) {
 
}

if (Meteor.isServer) {

high = function(){HTTP.call( 'GET', 'https://www.bitstamp.net/api/ticker/', {}, function( error, response ) {
        if ( error ) {
          console.log( error );
        } else {
          console.log(response.data.volume);

        }
      });}




Meteor.setInterval(high,10000);
}

I am successfully able to log the data I want into the server console periodically using Meteor.setInterval();

However, I’d now like to display the same data in html.

Please provide code with explanation if possible. Really appreciate it(noob beginner here :stuck_out_tongue: )

2

What you have to do, in order:

  1. create a method that keeps your function
  2. create a template
  3. create an event with call to this method
  4. pass the result from the method’s callback to reactive variable
  5. pass the data from the reactive variable to helper
  6. access this helper from your html file

If you have problems with any of these steps, start with Meteor tutorial, then check out http://docs.meteor.com/#/full/ and the official guide http://guide.meteor.com. Good luck!

3

Could you give me an example?(noob here)

4

Do you want to maintain a permanent history of results (save in Mongo)?

Do you want it on a timer or on request (click a button)?

5

So, this is one way of doing this. It’s not how I would do it (there’s no error checking and little except basic function). However, this will retain a permanent record in a collection, as well as show the latest data reactively. Caveat Emptor …

meteor create restdata
cd restdata
rm -f restdata.*
mkdir client lib server
meteor remove autopublish insecure
meteor add http

in server/restdata.js 

const load = () => {
  const volume = HTTP.get('https://www.bitstamp.net/api/ticker/').data.volume;
  const createdAt = new Date();
  RestData.insert({createdAt, volume});
};

Meteor.startup(function() {
  load();
  Meteor.setInterval(load, 10000);
});


Meteor.publish('restdata', function() {
  return RestData.find({}, {fields: {createdAt:1,volume:1}, sort: {createdAt:-1}, limit:1});
});

in lib/RestData.js 

RestData = new Mongo.Collection('restdata');

in client/restdata.html 

<head>
  <title>Track Rest Data</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0, width=device-width">
</head>

<body>
  {{> showRestData}}
</body>

<template name="showRestData">
  {{#if Template.subscriptionsReady}}
    {{#each results}}
      <div>At {{createdAt}}: {{volume}}</div>
    {{/each}}
  {{/if}}
</template>

in client/restdata.js 

Template.showRestData.onCreated(function() {
  this.subscribe('restdata');
});

Template.showRestData.helpers({
  results() {
    return RestData.find({}, {fields: {createdAt:1,volume:1}, sort: {createdAt:-1}, limit:1});
  }
});
2 Likes