How to display real time json data from API

help
1

How do I make a one page application which displays data from the following json api:

https://www.bitstamp.net/api/ticker/

I am a complete beginner with no experience at all.
I just want the data to be displayed, and updated every 1 minute.
Probably using bootstrap

2

I made a very rough demo for you at meteorpad

quick notes

  1. /client/app.js Template.bitstamp.onCreated When the Template is created an interval timer is invoked to call a server method (every minute in this context - 60000 milliseconds)
  2. /server/app.js Meteor.methods the server method makes an HTTP get request to the url (as above) (use server to avoid CORS issues)
  3. the full response is returned to the client as an object
  4. assuming a successful call, the data section of the response object
    4.1. is transformed with underscore’s pairs method into an array of arrays representing each key/value pair
    4.2. this array is then put in a Session variable to be consumed in the template - because a session var is reactive, whenever it changes, the template will change too
  5. /main.html <template name="bitstamp"> in the template a spacebars #each block is invoked to put each item in the array (formerly a key/value pair, now an array) is placed into <li> element, and then the nested array is in a nested #each to put the key and value into separate <span> elements (which are then styled with CSS)

I also added a countdown timer, so you can see when the ticker will next be updated

And, I didn’t use Bootstrap - I wanted to demonstrate how to get the data from the API request, polling every minute, into a format consumable by the template… when you use bootstrap (or another framework) you will adapt steps 4.1 & 5 as appropriate

Hope this helps

4 Likes
4

Hi @garrilla the link is down. Can you please restore it? I have the same issue

5

that’s a thread from nearly 3 years ago

the link was at meteorpad, a 3rd party service that no longer exists

i doubt very much the approach used then would work now, Meteor is quite a
different product

hope you find a solution to your woes

6

There are a few ways you could do this. It will help if you can outline the use case and which api you want to consume.

7

Hi @robfallows, thanks for your time.
I wish to get data from lisk-js node package API and push it inside a server collection every tot minutes. So on the client i want to print this value and update it automatically.
My idea (i must tell you that i figure out this one thanks to many of your posts, so thanks) is to call a server only function that takes the value and inserts it in the collection or updates its stored value.
After this I need to set a cron job to invoke repeatedly this server function.
Finally i publish this collection to the client that automatically updates the value and print it to screen.
Is this a good schema ? How would you do?

8

That sounds about right :slight_smile:

If you insert data into a collection and you publish that to your clients, they will automatically get new data as it appears.

As far as scheduling your server code, you should look at percolate:synced-cron and msavin:sjobs. Either of these will be good choices, as they will work in a scale-out scenario.

Just set up the schedule using one of the above packages and put it into the server-side Meteor.startup().

A final point about the lisk-js API: If the methods you’re using make use of a callback, you will need to wrap each method in a Meteor.wrapAsync or Meteor Promise. I couldn’t find the documentation on the callback signatures in the lisk-js docs. Assuming they’re of the form (error, result), then you would need to do something like:

const liskGetAccount = Meteor.wrapAsync(lisk.api().getAccount, lisk.api());

for each method you use. Then, you’ll be able to use the wrapped functions “synchronously”, and work with Meteor’s Fiber-based stack:

const account = liskGetAccount(accountAddress);
9

I implemented all your suggestions (with msavin package) and it works fine.
Thanks sir!

1 Like