OK, so this is a bit off-topic on this forum, but since this place is filled with talented people and the end goal is data integration to OpenHAB, I’ll ask here.
First a bit of background: The city I live in published an event calendar via an API that produces JSON output. I’m fully aware that the individual data could be imported to items, but as I’m only planning on displaying the calendar entries, not actually planning on triggering anything, I’d like to just display a web page in HABpanel. Now, I do confess I know absolutely nothing of javascript so my questions might seem stupid to somebody more knowledgeable. By repeatedly bashing my head to the wall, I’ve come up with the following only partially working solution:
<!DOCTYPE html>
<html>
<body>
<h2 id="demo1"></h2>
<img id="myImg" style="float:right;width:200px;">
<p id="demo3"></p>
<p id="demo2"></p>
<script>
var json = new XMLHttpRequest();
json.open("GET", "https://api.turku.fi/linkedevents/v1/event/?keyword=childfamilies&end=today&page=1&start=today&include=location&format=json", true);
json.responseType = 'json';
json.send();
json.onload = function() {
var pages = parseInt(json.response.meta.count/20)+1;
console.log(pages);
var myObj = json.response['data'].filter(function (data) {
var start = new Date(data.start_time)
var today = new Date()
if (start - today <= 0) {
data.start_in_past = 1;
} else {
data.start_in_past = 0;
}
if (typeof data.name.fi == 'undefined') {
data.name.fi = data.name.sv;
}
if (typeof data.description.fi == 'undefined') {
data.description.fi = data.description.sv;
}
return data.start_in_past==0 && data.sub_events==0;
});
console.log(myObj)
for (var i = 0; i < myObj.length; i++) {
document.getElementById("demo1").innerHTML = myObj[i].name.fi;
document.getElementById("demo2").innerHTML = myObj[i].description.fi;
document.getElementById("demo3").innerHTML = new Date(myObj[i].start_time);
document.getElementById("myImg").src = myObj[i].images[0].url;
}
}
</script>
</body>
</html>
What this manages to do, is read the first (of many pages worth) of data from the API. It then filters the entries to only include single events and then displays one of these events on the web page. I must say I’m pretty damn proud of even getting this far, but this is as far as I can get on my own I’m afraid.
What I need help with is:
- as data is spread across multiple pages, they would all have to be read. There’s a meta-section in the data that has the url of the following page (on the last page it is null). There’s also the total number of items and always 20 items per page, so the number of the last page can also be calculated from that (that’s what var pages is for in the code).
I however have no idea of how to load the multiple pages, other than hard code, which isn’t a good solution as the number of pages isn’t fixed. - When finally all the pages are loaded, the JSON would need to merged/concatenated or done some other magic to so that the data would be in a single array.
- When that would finally be done, the page elements would need to be dynamically created so that all the calendar entries are shown and not just the one as it is now.
- Then finally I suppose I can just throw the html anywhere where it’s accessible to OpenHAB and render it in a frame on HABpanel?
I’m greatful for any and all help you can provide.
Mikael
