X__
Lieutenant
- Registriert
- Okt. 2002
- Beiträge
- 646
Hallo,
ich bin dabei für meine Heimautomatisation (openHAB) eine kleine HTML-Erweiterung
zu bauen. Darin soll möglichst einfach eine dynamische Tabelle (Ladestandsanzeigen von Batterien)
erzeugt werde.
Dazu habe ich ein HTML-Grundgerüst erschaffen. In dieses Grundgerüst möchte ich ein Javascript einbauen, dass mir
die Tabelle je nach den gelieferten Daten erweitert.
Das Javascript soll möglichst einfach gehalten werden und nur dafür sorgen, dass ein bereits fertiger String in das HTML-Gerüst
eingespleisst wird (Zeile 18). Das gesamte Aufbereiten der Daten und bereitstellen als String übernimmt serverseitig ein JRuby Programm und auf den aufbereiteten String greife ich über eine REST Api zu.
Vom Prinzip funktioniert das (siehe erstes Ergebnis) nur der async-Aufruf scheint mir dazwischen zu hauen (siehe zweites Ergebnis).
Wie kann ich das Problem beheben ?
PS: Nicht wundern: Zum Testen ist im HTML bereits "Batterie 1" mit enthalten - das fliegt natürlich später raus.
Das funktioniert:
Ein fixer String, wie ihn der GET Aufruf zurückbringen würde.
Dazu muss aus dem Script-Aufruf im HTML allerdings das "async" entfernt werden
Ergebnis 1:
Das funktioniert nicht:
Der GET Aufruf bekommt zwar die richtigen Daten (identisch, wie der fixe String aus dem ersten Beispiel),
diese werden aber erst viel zu spät bereitgestellt, wodurch die ganze HTML-Seite anscheinend wieder überschrieben wird.
Ergebnis 2:
ich bin dabei für meine Heimautomatisation (openHAB) eine kleine HTML-Erweiterung
zu bauen. Darin soll möglichst einfach eine dynamische Tabelle (Ladestandsanzeigen von Batterien)
erzeugt werde.
Dazu habe ich ein HTML-Grundgerüst erschaffen. In dieses Grundgerüst möchte ich ein Javascript einbauen, dass mir
die Tabelle je nach den gelieferten Daten erweitert.
Das Javascript soll möglichst einfach gehalten werden und nur dafür sorgen, dass ein bereits fertiger String in das HTML-Gerüst
eingespleisst wird (Zeile 18). Das gesamte Aufbereiten der Daten und bereitstellen als String übernimmt serverseitig ein JRuby Programm und auf den aufbereiteten String greife ich über eine REST Api zu.
Vom Prinzip funktioniert das (siehe erstes Ergebnis) nur der async-Aufruf scheint mir dazwischen zu hauen (siehe zweites Ergebnis).
Wie kann ich das Problem beheben ?
PS: Nicht wundern: Zum Testen ist im HTML bereits "Batterie 1" mit enthalten - das fliegt natürlich später raus.
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel der Seite | Name der Website</title>
<link rel="stylesheet" href="css/glob_battchecker.css">
</head>
<body>
Batterie-Ladezustände
<table>
<tr>
<th>Gerät</th><th>Zustand</th>
</tr>
<tr>
<td>Batterie 1</td><td>10%</td>
</tr>
<script language="JavaScript" src="js/glob_battchecker.js" async></script>
</table>
</body>
</html>
Das funktioniert:
Ein fixer String, wie ihn der GET Aufruf zurückbringen würde.
Dazu muss aus dem Script-Aufruf im HTML allerdings das "async" entfernt werden
Javascript:
'use strict';
let tabledata = '<tr><td>Batterie 2</td><td>14 %</td></tr><tr><td>Batterie 3</td><td>22 %</td></tr>';
document.write(tabledata);
Ergebnis 1:
Das funktioniert nicht:
Der GET Aufruf bekommt zwar die richtigen Daten (identisch, wie der fixe String aus dem ersten Beispiel),
diese werden aber erst viel zu spät bereitgestellt, wodurch die ganze HTML-Seite anscheinend wieder überschrieben wird.
Javascript:
'use strict';
async function fetchData() {
const theUrl = 'http://192.168.0.20:8088/gimmesometabledata';
const response = await fetch(theUrl)
.then(res => {
if (res.ok) {
console.log("HTTP request successful")
}
else {
console.log("HTTP request unsuccessful")
}
return res
})
const data = await response.text();
return data;
}
fetchData().then( data => {
console.log("data=" + data);
document.write(data);
});
Ergebnis 2: