Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄

[miggedy]

Hallo,
ich habe ein sehr seltsames Problem (wie ich finde) und komme nicht drauf wo das Problem liegt.
Ich erstelle einen String der ein HTML-Table ist und schreibe diesen dann per SetState in einen state um es dann in der vis anzuzeigen.
Der Code ist einfach das hier:

  	let json = JSON.parse(getState(JSON_ID).val);
        const TABLE =  `<table width='100%'>\n \
                    <thead>\n \
                        <tr>\n \
                            <td>&#128646;</td><td>&#128034;</td><td>&#127919;</td><td>&#128694;</td>\n \
                        </tr>\n \
                    </thead>\n \
                    <tr>\n \
                        <td>${getDeparture(0,json)}</td><td>${getDelay(0,json)}</td><td>${getArrival(0,json)}</td><td>${getWalktime(0,json)}</td>\n \
                    </tr>\n \
                    <tr>\n \
                        <td>${getDeparture(1,json)}</td><td>${getDelay(1,json)}</td><td>${getArrival(1,json)}</td><td>${getWalktime(1,json)}</td>\n \
                    </tr>\n \
                    <tr>\n \
                        <td>${getDeparture(2,json)}</td><td>${getDelay(2,json)}</td><td>${getArrival(2,json)}</td><td>${getWalktime(2,json)}</td>\n \
                    </tr>\n \
                </table>`;
        log ("TABLE: " + TABLE);
	setState(oid, TABLE);

Wie man sieht, schreibe ich am Ende das "Ergbnis" ins log und da steht dann auch der von mir erwartete String:

TABLE: <table width='100%'> <thead> <tr> <td>&#128646;</td><td>&#128034;</td><td>&#127919;</td><td>&#128694;</td> </tr> </thead> <tr> <td>12:10</td><td><span style='color:red'>2</span></td><td>12:29</td><td><span style='color:red'>12:00 (-7)</span></td> </tr> <tr> <td>12:28</td><td><span style='color:white'>0</span></td><td>12:49</td><td><span style='color:white'>12:18 (10)</span></td> </tr> <tr> <td>12:48</td><td><span style='color:white'>0</span></td><td>13:09</td><td><span style='color:white'>12:38 (30)</span></td> </tr> </table>

Im Objekt-Browser (sowie in der vis die einfach nur diesen state als HTML anzeigt) steht aber folgendes:

<table width='100%'>
                     <thead>
                         <tr>
                             <td>&#128646;</td><td>&#128034;</td><td>&#127919;</td><td>&#128694;</td>
                         </tr>
                     </thead>
                     <tr>
                         <td>12:10</td><td><span style='color:red'>2</span></td><td>12:29</td><td><span style='color:red'>12:00 (-7.000216666666667)</span></td>
                     </tr>
                     <tr>
                         <td>12:28</td><td><span style='color:green'>0</span></td><td>12:49</td><td><span style='color:white'>12:18 (10.999766666666666)</span></td>
                     </tr>
                     <tr>
                         <td>12:48</td><td><span style='color:green'>0</span></td><td>13:09</td><td><span style='color:white'>12:38 (30.999766666666666)</span></td>
                     </tr>
                 </table>

Man siehe diese vielen Nachkommastellen rechts in der Tabelle die vorher nicht da waren. Wie kann sowas passieren? Übergebe das ganze Ding doch als String, wie schafft es das JS innerhalb von setState da so einen Rundungsfehler rein zu bekommen? Passiert übrigens nicht immer, in ca. 50% der Fälle passt es, dann sind auch im Objekt die gerundeten Werte.

Was ich auch schon probiert habe aber mit gleichem Ergebnis, ist dass ich den String vorher kopiert habe, um sicher zu gehen, dass das String replacement nicht doch irgendwie innerhalb von setState noch mal ausgeführt wird und dann was anderes rauskommt. Also auch wenn ich das hier mache, ist es im log richtig, im Objekt aber mit Nachkommastellen:

    let test = JSON.parse(JSON.stringify(TABLE));
    log ("TABLE: " + test);
    setState(oid, test);

[AlCalzone]

@miggedy Ich schätze, das passiert während der Umwandlung in den String mit ${getWalktime(2,json)}. Ich kann mir zwar nicht erklären, warum du die unterschiedlichen Ergebnisse siehst, aber probiers mal so:
${getWalktime(2,json).toFixed(0)}.

Das wandelt die Zahl in einen String um, der garantiert keine Nachkommastellen hat.

[miggedy]

@AlCalzone said in SetState schreibt was anderes als ihr übergeben wurde:

.toFixed(0)

Wenn ich .toFixed(0) anfüge, kommt sogar ein JS error, wil toFixed() nicht auf einen String angewendet werden kann. Ist also bereits ein String. Die Methode baut nämlich auch bereits einen String zusammen:

function getWalktime(i, json) {
    let departure = json.journeys[i].legs[0].departure;
    departure = moment(departure).subtract(10, "minute");

    let departureDiff = moment.duration(departure.diff(moment())).minutes();
    return `<span style='color:${departureDiff < 0 ? "red" : departureDiff < 5 ? "green" : "white"}'>${departure.format(moment.HTML5_FMT.TIME)} (${departureDiff})</span>`;
}

Hab sicherheitshalber da jetzt auch mal ein .toFixed(0) an das departureDiff gemacht (auch wenn es irgendwie alles keinen Sinn macht), aber auch das resultiert in das gleiche Ergebnis. Log Ausgabe korrekt, im state mit Nachkommastellen.

Echt verrückt! ;-)

[miggedy]

Jetzt hatte ich gerade noch einen Geistesblitz: Was ist wenn vielleicht im Hintergrund eine zweite Instanz des Scriptes parallel läuft mit einem älteren Code den ich wärend der Entwicklung gestartet habe und mir ständig meinen korrekten neuen Status überschreibt und ich denke nur, dass mein Script verrückt spielt? Das würde auch erklären, warum ich das Verhalten nicht in 100% der Fälle sehe, sondern nur zu 50%.

Also mal den ganzen PI neugestartet um sicher zu gehen, dass alle Prozess frisch sind...

Und Zack: Problem ist weg. :face_palm:

Danke trotzdem!