So, what’s going on here?

ES6

The code above is using ES6 (‘modern Javascript’). Here are a couple of great resources, if you want to learn more:

• Free (brief) online course: https://medium.freecodecamp.org/want-to-learn-es6-take-this-free-23-part-course-and-become-a-javascript-ninja-55002db1ff74
• Mozilla reference pages: https://developer.mozilla.org/en-US/docs/Web/JavaScript
• A bit more advanced, for testing your knowledge: http://es6katas.org/

Get the data

The ‘getGeniusHubZoneData’ uses ‘fetch’ which is an API call that is built into most modern web browsers. It lets you make an HTTP request (in this case from my.geniushub.co.uk), and capture the result.

It uses the ES6 version of promises (async / await) which basically means that the code will wait whilst the browser goes away, talks to the remote server, and collects the result.

We are setting the Authorization header, to tell ‘fetch’ to use our token, so that my.geniushub.co.uk will know which Hub to get the information from, and also authenticate that we are allowed to do that!

Finally, the API returns results in the JSON format, so we call ‘data.json()’ to convert the HTTP body text, into a javascript object that we can use directly in our program.

Show the data

We’ve called the getGeniusHubZoneData function, now let’s put the result where we can see it.

The API endpoint that we called ‘/zones/’ returns a list, so we’ll print that to the screen.

We use the ‘document.write’ function to put HTML onto the webpage output pane.

We iterate through each zone one at a time, using a ‘for’ loop, and for each zone, we print out the information that we want: zone ID, zone name and zone temperature (if the zone a temperature reading).