über "Fetch" Json Array/Object auswerten

[mat-sche]

Guten Abend,

mal wieder an einer Verbesserung bzw. Erweiterung meiner Seite bastelnd, bin ich wieder auf Probleme gestoßen.
Aus den Skripts oben, bekomme ich mit der class="Position" einen Wert im Bereich von 0 - 100. Diesen Wert würde ich gern in einem Slider

Code:

<div class="slider">
        <label for="fader">Volume </label><input type="range" min="0" max="100" value class="Position" id="fader" step="20" list="volsettings">
        <datalist id="volsettings">
           <option>0</option>
           <option>20</option>
           <option>40</option>
           <option>60</option>
           <option>80</option>
           <option>100</option>
        </datalist>
      </div>

anzeigen lassen. Doch leider ist es dann doch nicht so einfach wie ich dacht. Was/wie müssen die Daten "aufgearbeitet" werden um sie so nutzen zu können.
Gern würde ich dann auch einen Wert von dem Slider verschicken wollen: http://192.168.188.121/cm?cmnd=ShutterPosition%2050, also es müsste die Valuegröße an die Position %20xxx geschrieben werden.
Würde mich über einen Gedankenanstoss freuen!
MAT!

[Sempervivum]

Hallo Mat,
Du kannst die Position einstellen indem Du das value auf den betreffenden Wert setzt:

Code:

document.getElementById('fader').value = val;

wenn der Wert in der Variablen val steht. 

Und anders herum kannst Du das value auch auslesen und damit die URL zusammenstellen und aufrufen:

Code:

let
    val = document.getElementById('fader').value,
    url = `http://192.168.188.121/cm?cmnd=ShutterPosition%20${val}`;
fetch(url);

[mat-sche]

Hallo Ulrich,

Code:

document.getElementById('fader').value = val;

wenn der Wert in der Variablen val steht. 

=> Das ist gut! So hätte ich die Größe vom Slider in der Variable, perfekt!
Ich bekomme einen Wert über eine Fetch-Auswertung (siehe Aktionen weiter unten) den ich mir auf der Webseite  <div class="xyz"></div> anzeigen lasse. Dieser Wert liegt zwischen 0 und 100 und diesen würde ich gern der Variable val übergeben. Wenn ich per Fetch die Daten vom Mikrocontroller hole, soll diese vom Slider angezeigt werden zugleich aber auch wieder weitergegeben werden bei einer Änderung an:

Code:

let
    val = document.getElementById('fader').value,
    url = `http://192.168.188.121/cm?cmnd=ShutterPosition%20${val}`;
fetch(url);

Den Zudammenspiel von Daten, Arrays... in Javascript und HTML sind mir leider noch nicht so geläufig, könntest Du mir da bitte weiter helfen?

[Sempervivum]

Das verstehe ich so, dass es zwei fetch-Anweisungen geben muss, zuerst zum Holen der Variablen und dann zum Wegschicken. Müsste dann so aussehen:

Code:

fetch('die-url-zum-holen')
    .then(response => response.text())
    .then(val => {
         document.getElementById('fader').value = val;
         document.querySelector('.xyz').textContent = val;
         const url = `http://wie zuvor`;  
         fetch(url);
    });

Dies ungetestet, musst Du versuchen, es zum Laufen zu bringen, wenn es nicht auf Anhieb funktioniert.

[mat-sche]

Hallo Ulrich,

mit Deinen letzten Codevorschlägen bin ich nicht zurech gekommen. Habe jetzt etwas anderes noch ausprobiert, scheitere daran aber.

Code:

            fetch('http://192.168.188.121/cm?cmnd=status%208').then(function(response) {
                response.text().then(function(text) {
                    JSON.parse(text, function (key, name) {
                        console.log("key");
                        console.log(key);
                        console.log("name");
                        console.log(name);
                        if (key == "Position") { document.getElementById('Value_1').innerHTML = name; }
                       
                    });
                });
            });

Code:

Uncaught (in promise) TypeError: document.getElementById(...) is null
    loadDaten file:///C:/Users/admin/OneDrive/05 - Arduino - Boards - Software/Sketchbook/eigene Progs/29_-_ESP32_NRF24/Html/2024.01.26/rolladen.html:174
    loadDaten file:///C:/Users/admin/OneDrive/05 - Arduino - Boards - Software/Sketchbook/eigene Progs/29_-_ESP32_NRF24/Html/2024.01.26/rolladen.html:169
    promise callback*loadDaten/< file:///C:/Users/admin/OneDrive/05 - Arduino - Boards - Software/Sketchbook/eigene Progs/29_-_ESP32_NRF24/Html/2024.01.26/rolladen.html:168
    promise callback*loadDaten file:///C:/Users/admin/OneDrive/05 - Arduino - Boards - Software/Sketchbook/eigene Progs/29_-_ESP32_NRF24/Html/2024.01.26/rolladen.html:167
    <anonymous> file:///C:/Users/admin/OneDrive/05 - Arduino - Boards - Software/Sketchbook/eigene Progs/29_-_ESP32_NRF24/Html/2024.01.26/rolladen.html:55
rolladen.html:174:63

​

für den Programmteil bekommen ich dann diese Fehlermeldung im Entwicklerwerkzeug vom FireFox, warum dies?
Aber!

                        console.log("key");
                        console.log(key);
                        console.log("name");
                        console.log(name);

zeigen mir die richtigen Variablen an, die ich parsen möchte.

Ich habe gerade 3 große ?

MAT

[Sempervivum]

Diese Fehlermeldung ist eindeutig:

Uncaught (in promise) TypeError: document.getElementById(...) is null

Du übergibst als ID 'Value_1' und das Skript findet kein Element mit dieser ID. Entweder es existiert überhaupt nicht oder es wurde noch nicht angelegt als das Skript ablief. Steht das Skript am Ende des Body?

Ist das eigentlich eine neue, unabhängige Aufgabe oder besteht ein Zusammenhang mit dem Code vom Anfang dieses Threads?
Posting #7. 

[mat-sche]

Diese Fehlermeldung ist eindeutig:

Uncaught (in promise) TypeError: document.getElementById(...) is null

Du übergibst als ID 'Value_1' und das Skript findet kein Element mit dieser ID. Entweder es existiert überhaupt nicht oder es wurde noch nicht angelegt als das Skript ablief. Steht das Skript am Ende des Body?

Weder noch, habe die  ID im HTML Teil angegeben. und das Script steht am Anfang vom Body.

Ist das eigentlich eine neue, unabhängige Aufgabe oder besteht ein Zusammenhang mit dem Code vom Anfang dieses Threads?
Posting #7. 


Ja eigentlich schon.... bin aber vorerst daran gescheitert, da es noch eine Nummer zu groß ist und ich javascript nicht behersche.

Ursprünglich dachte ich, dass es leicht ist eine Variable aus einem Fetch zu parsen, diese Variable an einen Slider zu übergeben, den Slider zu verändern und nach der Änderung diese Größe wieder zurück zu senden.
Fakt ist:

Code:

http://192.168.188.121/cm?cmnd=ShutterPosition%208

bekomme ich als Json - Antwort

Code:

StatusSNS    
Time    "2024-02-27T20:26:59"
   Shutter1    
      Position    100
      Direction    0
      Target    100
      Tilt    0

Rohdaten:

{"StatusSNS":{"Time":"2024-02-27T20:26:59","Shutter1":{"Position":100,"Direction":0,"Target":100,"Tilt":0}}}

Position (100) gibt die Stellung vom Rolladen an. Diese Größe sollte in einem Slider dargestellt und veränderbar sein.
Wie ich nun die Variable "Position" parsen kann hab ich nun schon erfolgreich geschafft und mehr nicht .
Und da verließen sie mich ....

Ich schreib morgen Weiter...

[Sempervivum]

Weder noch, habe die  ID im HTML Teil angegeben. und das Script steht am Anfang vom Body.

Das ist dann genau das Problem, am Anfang des Body existiert das Element mit dieser ID noch nicht. Stelle das Skript an das Ende des Body und dieser Fehler wird verschwinden.

Die Hintergrundinfos sind auf jeden Fall schon mal sehr hilfreich.

Wie ich nun die Variable "Position" parsen kann hab ich nun schon erfolgreich geschafft

Das hatten wir schon Mal. Besser nicht mit einem Callback arbeiten sondern das JSON parsen lassen und direkt auf den Wert zugreifen:

Code:

    <script>
        const
            fader = document.getElementById('fader');
        fetch('thread1259-input-range-datalist.json').then(function (response) {
            // JSON parsen
            return response.json();
        }).then(function (data) {
            // Das geparste JSON steht als Objekt in data.
            // Wir können die Position direkt auslesen:
            const
                pos = data.StatusSNS.Shutter1.Position;
            // Und in den Fader eintragen:
            fader.value = pos;
        });
    </script>

So funktioniert es dann in meiner Testdatei.

[mat-sche]

Weder noch, habe die  ID im HTML Teil angegeben. und das Script steht am Anfang vom Body.

Das ist dann genau das Problem, am Anfang des Body existiert das Element mit dieser ID noch nicht. Stelle das Skript an das Ende des Body und dieser Fehler wird verschwinden.
   DIeses hier war mein Verschulden, war gestern doch etwas zu viel und zu spät   Ich habe die ID falsch geschrieben, also ein kleines v statt eines V. Dumm von mir!
Die Hintergrundinfos sind auf jeden Fall schon mal sehr hilfreich.

Wie ich nun die Variable "Position" parsen kann hab ich nun schon erfolgreich geschafft

Das hatten wir schon Mal. Besser nicht mit einem Callback arbeiten sondern das JSON parsen lassen und direkt auf den Wert zugreifen:

Das stimmt, dass hatten wir schon   aber auch da hatte ich gestern nichts mehr "gemerkt".

Code:

    <script>
        const
            fader = document.getElementById('fader');
        fetch('thread1259-input-range-datalist.json').then(function (response) {
            // JSON parsen
            return response.json();
        }).then(function (data) {
            // Das geparste JSON steht als Objekt in data.
            // Wir können die Position direkt auslesen:
            const
                pos = data.StatusSNS.Shutter1.Position;
            // Und in den Fader eintragen:
            fader.value = pos;
        });
    </script>

So funktioniert es dann in meiner Testdatei.

Leider funktioniert es bei mir nicht... Aber das macht nichts, da ich mitbekommen habe, dass ich keine Variable aus Tasmota bekomme, die mir den aktuellen Verlauf der Bewegung über Json ausgibt

=> Die Hintergrundinfos sind auf jeden Fall schon mal sehr hilfreich.

Also... Ich habe einige ESP82&32 als Tasmota Device laufen: Rolladen/Thermostat ect. Die Tasmota FW erlaubt es Http Request zu starten, die ich über Fetch einlesen kann. Jetzt habe ich mir eine Seite gebastelt     , die mir Werte aus dem Fetch anzeigt, dass klappt schon einmal, dank Dir!Für die Rolläden hätte ich auf der Seite gern einen Slider, der mir den aktuellen Stand des Rolladens anzeigt. Diese Funktion ist gegeben auf der Webseite von der Tasmota Steuerung:    

Wenn ich: http://192.168.188.121/?m=1 eingebe, bekomme ich eine Httml Seite mit:    

{t}<div><span class='p'>Schliessen</span><span class='q'>Öffnen</span></div><div><input type='range' min='0' max='100' value='100' onchange='lc("u",1,value)'></div></table>{t}<tr><td style='width:50%;text-align:center;font-weight:normal;font-size:54px'>OFF</td><td style='width:50%;text-align:center;font-weight:normal;font-size:54px'>OFF</td></tr><tr></tr></table>

Darin stehen die Werte für den Slider.
Nun, vollkommen überfragt, gibt es die Chance diese Daten abzufassen?
Entwicklerwerkzeug sieht so aus:    

Ich werd erst einmal die Butten basteln und die Seite vervollständigen und neben bei im Web nach einer lösung suchen oder Du hättest eine Idee...

Vielen DAnk! und bis später! MAT

[Sempervivum]

Für die Rolläden hätte ich auf der Seite gern einen Slider, der mir den aktuellen Stand des Rolladens anzeigt. Diese Funktion ist gegeben auf der Webseite von der Tasmota Steuerung

Das sollte kein unlösbares Problem sein. Du schreibst ja, dass die Seite des ersten Screenshots funktioniert, was die Anzeige betrifft. Da brauchen wir ja nur den Wert abzugreifen, wo im Moment 100 steht und im Slider anzuzeigen. Am besten postest Du mal den Code dieser Seite, dann sieht man wahrscheinlich schnell, wo man sich da einklinken muss.
Oder gibt diese Anzeige keine Zwischenwerte her, dass es nur "auf" und "zu" gibt?

da ich mitbekommen habe, dass ich keine Variable aus Tasmota bekomme, die mir den aktuellen Verlauf der Bewegung über Json ausgibt 

Das verstehe ich jetzt nicht, Du hattest doch dieses JSON gepostet:

Code:

{"StatusSNS":{"Time":"2024-02-27T20:26:59","Shutter1":{"Position":100,"Direction":0,"Target":100,"Tilt":0}}}

Und ich hatte das so verstanden, das "Position" die Position des Rolladen angibt? Mit genau diesem JSON hatte ich es getestet.