Help with js for custom weather scripted webview

I’ve been teaching myself html/css and a bit of javascript by working up a weather html page that I want to use on/in my OH sitemap but have hit some roadblocks that I was hoping someone could help me with.

My codepen is here: http://codepen.io/PabloNZ/pen/QpBPyb (the array’s for the data were just a way to get it looking right, I know it won’t work quite that way if I have to do GET requests first)

I have a simpleweather version of the code here: http://codepen.io/PabloNZ/pen/XNjgJQ But I find the simpleWeather weather data to not be anywhere near what the actual weather is at home.

I have other scripts that pull the required data into OH from www.metservice.com (the main new zealand weather forecasters) and want to give my js access to this data. I need to work up some transformations for the short weather descriptions to apply to the right weather icon too, but that’s for another day.

I know I could use a GET request from the rest API for each item of information, but feel like that’s not the most succinct/best method to get the information into the html as it will require about 30 GET requests to populate it all. I may as well just skip OH completely at this point and request the data from metservice all over again.

I see with the weather binding example it uses html tables with eg. ${forecast(0):temperature.min(%.0f)} to display the current days min temp. However I won’t be using the weather binding (unless I can figure out a way to add metservice as a weather provider option) and don’t want to use tables to show my information. Or perhaps I do want to try and add a weather provider to the binding…? Metservice doesn’t advertise their data publicly so this might be a breach of conditions.

So the long and short of it is, is there a clean/simple way to get the data from the OH rest API into a JS?

use SSE (OH 2 required)
see