Javascript: wie im Script auf async warten

X__ · 22. Januar 2024

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.

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:

QXARE · 22. Januar 2024

Hi, du könntest versuchen, den Table mit entsprechenden Bereichen (thead, tbody) zu ergänzen:

Code:

    <table>
        <thead>
        <tr>
            <th>Gerät</th><th>Zustand</th>
        </tr>
        </thead>
        <tbody id="content">
        <tr>
            <td>Batterie 1</td><td>10%</td>
        </tr>
        </tbody>
        <script language="JavaScript" src="js/glob_battchecker.js" async></script>                     
    </table>

Und dann statt document.write(data) sowas zu verwenden:

Code:

document.querySelector('#content').innerHTML = data;

FranzvonAssisi · 22. Januar 2024

Was QXARE geschrieben hat sollte funktionieren.

Nur als Erklärung noch:
Das Problem ist nicht, dass es zu lange dauert, sondern, dass document.write das ganze document überschreibt und nicht nur einen kleinen Teil.

Lg

X__ · 23. Januar 2024

Danke. für den Tipp.
Ich werds heute abend mal ausprobieren und dann berichten.

FranzvonAssisi schrieb:
dass document.write das ganze document überschreibt

Aber warum klappt dass denn in der ersten Version, in der lediglich kein asynchroner Aufruf stattfindet ?

floTTes · 23. Januar 2024

Because document.write() writes to the document stream, calling document.write() on a closed (loaded) document automatically calls document.open(), which will clear the document.

Ist viel ungefährlicher die Daten in generierte Elemente zu geben.

HTML:

<body>
    <h1>Meine Batterien</h1>
    <table>
        <thead>
            <tr>
                <th>Gerät</th>
                <th>Zustand</th>
            </tr>
        </thead>
        <tbody id="tbBatCond">
            <tr>
                <td>Batterie A</td>
                <td>10%</td>
            </tr>
        </tbody>
        <tfoot>
        </tfoot>
    </table>
</body>
<script>
    function addBatCondToTable(bid, bcond, tbid = "tbBatCond") {
        const row = document.getElementById(tbid).insertRow(-1);
        const cellcont = {
            id: row.insertCell(-1).innerHTML = bid,
            cond: row.insertCell(-1).innerHTML = bcond
        };

        return row;
    }

    addBatCondToTable("Batterie B", "25%");
</script>

X__ · 23. Januar 2024

Danke für die Tipps - funktioniert super

Suche

Javascript: wie im Script auf async warten

X__

Lieutenant

QXARE

Lt. Commander

FranzvonAssisi

Admiral

X__

Lieutenant

floTTes

Lt. Commander

X__

Lieutenant

Ähnliche Themen