HTML Datenpunkt dynamisch erzeugen
-
Ich erstelle mir gerade den HTML Code für eine dynamische Tabelle durch ein Script.
Mein Ziel wäre es 12 einzelne Tabellen in einem HTML Codeblock zusammenzufassen, damit ich diese dann in einem HTML Element in Vis anzeigen kann.Die einzelnen Datenpunkte sind jeweils mit ...data0 bis data11 durchnummeriert.
Wenn ich jetzt einen Zähler z.b. auf 2 setzte erstellt mir das Skript korrekt die Tabelle zu dem Datenpunkt - wenn ich allerdings den Zähler in eine Schleife packe stürzt der Adapter ab.
Könnt Ihr mir einen Tipp geben was ich falsch mache?
const htmlFile = []; var zaehler = 0; Render(zaehler); function Render(zaehler) { var uhrzeit = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.uhrzeit').val; var pictocode = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.pictocode_picture').val; var temperaturfelt = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.felttemperature_round').val; var temperaturHg = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.temperatureBackColor').val; var temperaturVg = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.temperatureForeColor').val; var winkel = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.winddirection').val; var windspeed = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.windspeed_avg').val; var rainspot = '<img src="/0_userdata.0/meteoblue/basic-day/data_1h/data_' + zaehler + '/rainspotpic' + zaehler + '.png" height="48" width="48">'; var uvindexcolor = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.uvindex_color').val; var uvindex = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.uvindex').val; var precipitation = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.precipitation').val; var temperatur = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.temp_round').val; htmlFile.push('<!DOCTYPE html><html lang=\"de\">'); htmlFile.push('<head><meta charset=\"UTF-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>TabelleMeteoblueTbl1h</title>'); htmlFile.push('<style type=\"text/css\">'); htmlFile.push('.table{border-collapse:collapse;border-spacing:0;border-color:#darkgrey;border-style:solid;border-width:.1px;color:#dfdfdf;font-family:Arial,sans-serif;font-size:1rem;overflow:hidden;padding:1px 1px;word-break:normal;}'); htmlFile.push('.table .uhrzeit{background-color:#000;text-align:center;vertical-align:middle;font-size:.7rem;font-weight:bold}'); htmlFile.push('.table .temperatur{border-color:inherit;text-align:center;vertical-align:middle;font-size:1rem;font-weight:bold}'); htmlFile.push('.table .pictocode{border-color:inherit;text-align:center;vertical-align:middle}'); htmlFile.push('.table .rainspot{border-color:inherit;text-align:center;vertical-align:middle padding:0}'); htmlFile.push('.table .iconregen{border-right:.1px solid;border-left:.1px solid;border-color:inherit;text-align:center;vertical-align:middle}'); htmlFile.push('.table .iconuv{border-right:.1px solid;border-left:.1px solid;border-color:inherit;text-align:center;vertical-align:middle}'); htmlFile.push('.table .iconhand{border-right:.1px solid;border-left:.1px solid;border-color:inherit;text-align:center;vertical-align:middle}'); htmlFile.push('.table .pfeil{border-color:inherit;text-align:center;vertical-align:middle;transform:rotate(' + winkel + 'deg)}'); htmlFile.push('.table .windspeed{border-color:inherit;text-align:center;vertical-align:middle;font-size:.6rem}'); htmlFile.push('.table .precipitation{border-right:.1px solid;border-left:.1px solid;border-color:inherit;text-align:center;vertical-align:middle;font-size:.6rem}'); htmlFile.push('.table .felttemperatur{border-right:.1px solid;border-left:.1px solid;border-color:inherit;text-align:center;vertical-align:middle;font-size:.6rem}'); htmlFile.push('.table .uv{color:' + uvindexcolor + ';border-right:.1px solid;border-left:.1px solid;border-color:inherit;font-weight:bold;text-align:center;vertical-align:middle;font-size:1rem}'); htmlFile.push('</style>'); htmlFile.push('<body>'); htmlFile.push('<table class=\"table\" style=\"undefined;table-layout:fixed;width: 100%\">'); htmlFile.push('<colgroup><col style=\"width: 15%\"><col style=\"width: 20%\"><col style=\"width: 10%\"><col style=\"width: 10%\"><col style=\"width: 10%\"><col style=\"width: 10%\"><col style=\"width: 20%\"></colgroup>'); htmlFile.push('<tr>'); htmlFile.push('<td class=\"uhrzeit\">' + uhrzeit + '</td>'); htmlFile.push('<td class=\"pictocode\" rowspan=\"4\">' + pictocode + '</td>'); htmlFile.push('<td class=\"iconuv\" rowspan=\"2\"><img src="/vis.0/baisiepen/images/icons8-uv-index-64.png" height="20" width="20"></td>'); htmlFile.push('<td class=\"pfeil\" rowspan=\"2\"><img src="/vis.0/Element 1.png" height="20" width="20"></td>'); htmlFile.push('<td class=\"iconregen\" rowspan=\"2\"><img src="/vis.0/baisiepen/images/icons8-drop-64.png" height="20" width="20"></td>'); htmlFile.push('<td class=\"iconhand\" rowspan=\"2\"><img src="/vis.0/baisiepen/images/icons8-ganze-hand-50.png" height="20" width="20"></td>'); htmlFile.push('<td class=\"rainspot\" rowspan=\"4\">' + rainspot + '</td>'); htmlFile.push('</tr>'); htmlFile.push('<tr>'); htmlFile.push('<td style=\"background-color:' + temperaturHg + ';color:' + temperaturVg + ';\" class=\"temperatur\" rowspan=\"3\">' + temperatur + '°C</td>'); htmlFile.push('</tr>'); htmlFile.push('<tr>'); htmlFile.push('<td class=\"uv\">' + uvindex + '</td>'); htmlFile.push('<td class=\"windspeed\" rowspan=\"2\">' + windspeed + ' m/s</td>'); htmlFile.push('<td class=\"precipitation\" rowspan=\"2\">' + precipitation + ' </td>'); htmlFile.push('<td class=\"felttemperatur\" rowspan=\"2\">' + temperaturfelt + '°C</td>'); htmlFile.push('</tr>'); htmlFile.push('<tr>'); htmlFile.push('</tr>'); htmlFile.push('</table>'); htmlFile.push('</body>'); } let html = htmlFile.join(''); console.log(html); setState('0_userdata.0.meteoblue.htmltest', html, true);``` -
@dirk_1930 Zeige das ganze Mal mit deiner Schleife
-
@liv-in-sky
Ich hatte in der Zwischenzeit den Code noch etwas abgeändert und rufe die einzelnen Elemente jetzt wie folgt auf.
Die Schleife bekomme ich nicht hin
const htmlFile = []; var zaehler = 0; htmlFile.push('<!DOCTYPE html><html lang=\"de\">'); htmlFile.push('<head><meta charset=\"UTF-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>TabelleMeteoblueTbl1h</title>'); htmlFile.push('<style type=\"text/css\">'); htmlFile.push('.table{border-bottom:.1px solid darkgrey;border-top:.1px solid darkgrey;border-right:.1px solid darkgrey;border-left:.1px solid darkgrey;border-collapse:collapse;border-spacing:1;font-family:Arial,sans-serif;font-size:1rem;overflow:hidden;padding:1px 1px;word-break:normal;}'); htmlFile.push('.table .uhrzeit{background-color:#000;color:#dfdfdf;text-align:center;vertical-align:middle;font-size:.7rem;font-weight:bold}'); htmlFile.push('.table .temperatur{text-align:center;vertical-align:middle;font-size:1rem;font-weight:bold}'); htmlFile.push('.table .pictocode{text-align:center;vertical-align:middle}'); htmlFile.push('.table .rainspot{text-align:center;vertical-align:middle padding:0}'); htmlFile.push('.table .iconregen{text-align:center;vertical-align:bottom}'); htmlFile.push('.table .iconuv{text-align:center;vertical-align:bottom}'); htmlFile.push('.table .iconhand{text-align:center;vertical-align:bottom}'); htmlFile.push('.table .windspeed{text-align:center;vertical-align:middle;font-size:.6rem}'); htmlFile.push('.table .precipitation{text-align:center;vertical-align:middle;font-size:.6rem}'); htmlFile.push('.table .felttemperatur{text-align:center;vertical-align:middle;font-size:.6rem}'); await Render(zaehler); await Render(zaehler + 1); await Render(zaehler + 2); await Render(zaehler + 3); await Render(zaehler + 4); await Render(zaehler + 5); await Render(zaehler + 6); await Render(zaehler + 7); await Render(zaehler + 8); await Render(zaehler + 9); await Render(zaehler + 10); await Render(zaehler + 11); async function Render(zaehler) { var uhrzeit = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.uhrzeit').val; var pictocode = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.pictocode_picture').val; var temperaturfelt = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.felttemperature_round').val; var temperaturHg = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.temperatureBackColor').val; var temperaturVg = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.temperatureForeColor').val; var winkel = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.winddirection').val; var windspeed = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.windspeed_avg').val; var rainspot = '<img src="/0_userdata.0/meteoblue/basic-day/data_1h/data_' + zaehler + '/rainspotpic' + zaehler + '.png" height="48" width="48">'; var uvindexcolor = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.uvindex_color').val; var uvindex = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.uvindex').val; var precipitation = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.precipitation').val; var temperatur = getState('0_userdata.0.meteoblue.basic-day.data_1h.data_' + zaehler + '.temp_round').val; htmlFile.push('</style>'); htmlFile.push('<body>'); htmlFile.push('<table class=\"table\" style=\"undefined;table-layout:fixed;width: 100%\">'); htmlFile.push('<colgroup><col style=\"width: 15%\"><col style=\"width: 20%\"><col style=\"width: 10%\"><col style=\"width: 10%\"><col style=\"width: 10%\"><col style=\"width: 10%\"><col style=\"width: 20%\"></colgroup>'); htmlFile.push('<tr>'); htmlFile.push('<td class=\"uhrzeit\">' + uhrzeit + '</td>'); htmlFile.push('<td class=\"pictocode\" rowspan=\"4\">' + pictocode + '</td>'); htmlFile.push('<td class=\"iconuv\" rowspan=\"2\"><img src="/vis.0/baisiepen/images/icons8-uv-index-64.png" height="20" width="20"></td>'); htmlFile.push('<td style=\"text-align:center;vertical-align:middle;transform:rotate(' + winkel + 'deg)" rowspan=\"2\"><img src="/vis.0/Element 1.png" height="20" width="20"></td>'); htmlFile.push('<td class=\"iconregen\" rowspan=\"2\"><img src="/vis.0/baisiepen/images/icons8-drop-64.png" height="20" width="20"></td>'); htmlFile.push('<td class=\"iconhand\" rowspan=\"2\"><img src="/vis.0/baisiepen/images/icons8-ganze-hand-50.png" height="20" width="20"></td>'); htmlFile.push('<td class=\"rainspot\" rowspan=\"4\">' + rainspot + '</td>'); htmlFile.push('</tr>'); htmlFile.push('<tr>'); htmlFile.push('<td style=\"background-color:' + temperaturHg + ';color:' + temperaturVg + ';\" class=\"temperatur\" rowspan=\"3\">' + temperatur + '°C</td>'); htmlFile.push('</tr>'); htmlFile.push('<tr>'); htmlFile.push('<td style=\"color:' + uvindexcolor + ';text-align:center;vertical-align:middle;font-size:1rem;\">' + uvindex + '</td>'); htmlFile.push('<td style=\"color:#dfdfdf;font-size:.6rem;text-align:center; class=\"windspeed\" rowspan=\"2\">' + windspeed + ' m/s</td>'); htmlFile.push('<td style=\"color:#dfdfdf;font-size:.6rem;text-align:center;class=\"precipitation\" rowspan=\"2\">' + precipitation + ' mm </td>'); htmlFile.push('<td style=\"color:#dfdfdf;font-size:.6rem;text-align:center;class=\"felttemperatur\" rowspan=\"2\">' + temperaturfelt + '°C</td>'); htmlFile.push('</tr>'); htmlFile.push('<tr>'); htmlFile.push('</tr>'); } htmlFile.push('</table>'); htmlFile.push('</body>'); let html = htmlFile.join(''); console.log(html); setState('0_userdata.0.meteoblue.htmltest', html, true);
