über "Fetch" Json Array/Object auswerten

über "Fetch" Json Array/Object auswerten - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: über "Fetch" Json Array/Object auswerten (/showthread.php?tid=2731)

Seiten: Seiten: 1 2 3 4

RE: über "Fetch" Json Array/Object auswerten - mat-sche - 24.02.2024

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!

RE: über "Fetch" Json Array/Object auswerten - Sempervivum - 25.02.2024

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);

RE: über "Fetch" Json Array/Object auswerten - mat-sche - 25.02.2024

(25.02.2024, 10:49)Sempervivum schrieb: 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?

RE: über "Fetch" Json Array/Object auswerten - Sempervivum - 25.02.2024

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.

RE: über "Fetch" Json Array/Object auswerten - mat-sche - 27.02.2024

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

RE: über "Fetch" Json Array/Object auswerten - Sempervivum - 27.02.2024

Diese Fehlermeldung ist eindeutig:

Zitat: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.

RE: über "Fetch" Json Array/Object auswerten - mat-sche - 27.02.2024

(27.02.2024, 20:06)Sempervivum schrieb: Diese Fehlermeldung ist eindeutig:

Zitat: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 Sad

.
Und da verließen sie mich ....

Ich schreib morgen Weiter...

RE: über "Fetch" Json Array/Object auswerten - Sempervivum - 27.02.2024

Zitat: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.

Zitat: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.

RE: über "Fetch" Json Array/Object auswerten - mat-sche - 28.02.2024

(27.02.2024, 22:04)Sempervivum schrieb:
Zitat: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.

Zitat: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

Dateiname: Screenshot 2024-02-28 at 15-18-24 Rolladen_Tasmo.png Größe: 87,94 KB 28.02.2024, 15:18

, 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:

Dateiname: Screenshot 2024-02-28 at 15-08-56 Tasmota-Rolladen-Rechts - Hauptmenü.png Größe: 63,88 KB 28.02.2024, 15:09

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

Dateiname: Screenshot 2024-02-28 at 15-10-42 Screenshot.png Größe: 37,13 KB 28.02.2024, 15:10

Zitat:{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:

Dateiname: 2024-02-28 15_16_47-Entwicklerwerkzeuge - http___192.168.188.121__m=1.png Größe: 83,27 KB 28.02.2024, 15:18

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

RE: über "Fetch" Json Array/Object auswerten - Sempervivum - 28.02.2024

Zitat: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?

Zitat: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.