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
I made a very rough demo for you at meteorpad
quick notes
-
/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)
-
/server/app.js Meteor.methods
the server method makes an HTTP get request to the url (as above) (use server to avoid CORS issues)
- the full response is returned to the client as an object
- 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
-
/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
Hi @garrilla the link is down. Can you please restore it? I have the same issue
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
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.
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?
That sounds about right ![:slight_smile: :slight_smile:](https://emoji.discourse-cdn.com/twitter/slight_smile.png?v=10)
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);
I implemented all your suggestions (with msavin package) and it works fine.
Thanks sir!
1 Like