über "Fetch" Json Array/Object auswerten

[Sempervivum]

Ich sehe da zwei Mal einen Aufruf von setInterval, in deinem ersten und in dem zweiten Codeblock. Leider erkenne ich nicht, in welchem Zusammenhang dies beiden Blöcke stehen. Auf jeden Fall: In dem ersten Block weist Du die ID keiner Variablen zu, daher kann dieser Timer auch nicht gestoppt werden. Geh am besten so vor:
Definiere die Variable timeForShutter außerhalb jeder Funktion:

Code:

let timerForShutter;

und zunächst noch ohne setInterval. Damit legst Du fest, dass diese Variable global ist und von überall erreichbar.

Und dann kannst Du den Timer starten und gleichzeitig seine ID der Variablen zuweisen:

Code:

timerForShutter = setInterfal(update, 2000);

Dann sollte das Stoppen des Timers von jeder Stelle im Code funktionieren.

[Sempervivum]

Guten Morgen Mat,
ich habe jetzt zwei Mal versucht, deine PN zu beantworten aber jedes Mal ist die Nachricht im Nirwana verschwunden.

Super, dass es jetzt funktioniert und dass Du es zum großen Teil selbständig zum Laufen gebracht hast, so etwas freut einen immer zu lesen.
Wenn ich es richtig verstanden habe hast Du die Funktionen jeweils vervielfacht. In dem Fall ist es in der Tat möglich, den Code wesentlich schlanker zu machen. Würde dann in etwa so aussehen (ungetestet):

Code:

Code:

    <div id="wrapper120">
        <input class="slider" type="range">
        <div class="out"></div>
    </div>
    <div id="wrapper121">
        <input class="slider" type="range">
        <div class="out"></div>
    </div>
    <script>
        function shutter(sel, ip) {
            const
                wrapper = document.querySelector(sel),
                slider = wrapper.querySelector('.slider'),
                output = wrapper.querySelector('.out');
            let
                timerForFenster;
            function update() {
                fetch(`http://${ip}/cm?cmnd=ShutterPosition%20?`).then(function (response) {
                    response.text().then(function (text) {
                        const Status = JSON.parse(text);
                        console.log("Anzeige der Constante", Status);
                        output.innerHTML = Status.Shutter1.Position;
                        slider.value = data;
                        // Vergleich von Ist und Zielposition audf dem Tasmota-Device
                        if (Status.Shutter1.Position == Status.Shutter1.Target) {
                            // Timer stoppen:
                            clearInterval(timerForFenster);
                        }
                    });
                });
            }
            function onSlide() {
                fetch(`http://${ip}/cm?cmnd=ShutterPosition%20` + slider.value).then(function (response) {
                    response.text().then(function (text) {
                        const Status = JSON.parse(text);
                        timerForFenster = setInterval(update, 1000);
                    });
                });
            }
            slider.addEventlister('change', onSlide)
        }
        shutter('#wrapper120', '192.168.188.146');
        shutter('#wrapper121', '192.168.188.147');
    </script>

Man sagt zwar "Wenn es läuft, fass es nicht an." aber vielleicht hast Du ja doch in einer ruhigen Minute Lust, es umzustellen.

[mat-sche]

Code:

for (key in parsed.Timers) {                      
      const dest = cont.querySelector(':' + key);
        if (dest) {
            dest.innerHTML = parsed.Timers[key];
               if (item.idCont == "gruppe_timer_Device_1"){
                    document.getElementById("check_120").value = parsed.Timers;
                    console.log("'Zeige check_120 Timer= " ,  parsed.Timers);
                     }
          }
  }

Ich stehe vor einem Problem oder vor einer Wand und seh den Durchgang nicht:

In " const dest = cont.querySelector(':' + key); " wird doch im cont nach einem Zeichen gesucht und der Key übergeben?
Bei mir kommt aber immer "0" für die Konstante dest herraus. Das "  ':'  " ist doch bestimmt das Zeichen wonach gesucht wird? Welche Suchkriterien können bei .querySelector genutzt werden?

[Sempervivum]

Welche Suchkriterien können bei .querySelector genutzt werden?

Der Parameter von querySelector ist ein CSS-Selektor und querySelector sucht nach einem DOM-Element, auf das dieser Selektor passt. Falls dir der Begriff "CSS-Selektor" noch nichts sagt, informiere dich hier:
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren
Sehr einfaches Beispiel, das wahrscheinlich auf dein Problem passt:

Code:

cont.querySelector('.deine-klasse')

sucht in dem Container cont nach dem ersten Element, dass die Klasse "deine-Klasse" hat.

[mat-sche]

Guten Morgen Mat,
ich habe jetzt zwei Mal versucht, deine PN zu beantworten aber jedes Mal ist die Nachricht im Nirwana verschwunden.
Ich habe mich schon gefragt warum das so war, dass ich eine doppeleintrag bei mir gefunden habe

Code:

Code:
    <div id="wrapper120">
        <input class="slider" type="range">
        <div class="out"></div>
    </div>
    <div id="wrapper121">
        <input class="slider" type="range">
        <div class="out"></div>
    </div>
    <script>
        function shutter(sel, ip) {
            const
                wrapper = document.querySelector(sel),
                slider = wrapper.querySelector('.slider'),
                output = wrapper.querySelector('.out');
            let
                timerForFenster;
            function update() {
                fetch(`http://${ip}/cm?cmnd=ShutterPosition%20?`).then(function (response) {
                    response.text().then(function (text) {
                        const Status = JSON.parse(text);
                        console.log("Anzeige der Constante", Status);
                        output.innerHTML = Status.Shutter1.Position;
                        slider.value = data;
                        // Vergleich von Ist und Zielposition audf dem Tasmota-Device
                        if (Status.Shutter1.Position == Status.Shutter1.Target) {
                            // Timer stoppen:
                            clearInterval(timerForFenster);
                        }
                    });
                });
            }
            function onSlide() {
                fetch(`http://${ip}/cm?cmnd=ShutterPosition%20` + slider.value).then(function (response) {
                    response.text().then(function (text) {
                        const Status = JSON.parse(text);
                        timerForFenster = setInterval(update, 1000);
                    });
                });
            }
            slider.addEventlister('change', onSlide)
        }
        shutter('#wrapper120', '192.168.188.146');
        shutter('#wrapper121', '192.168.188.147');
    </script>

Vielen Dank dafür, das muss ich aber erst einmal analysieren. Die erste "Megaschleife":

Code:

const Status_0 = [
                //Daten für Tasmo-Status_0: Device_1. Shutter: Wohnzimmer links, rechts, mitte ; Bad links, rechts

               
                {
                    url: 'http://192.168.188.120/cm?cmnd=status%200',
                    idCont: 'gruppe_heber_Device_1'
                },
               
                {
                    url: 'http://192.168.188.121/cm?cmnd=status%200',
                    idCont: 'gruppe_heber_Device_2'
                },
                {
                    url: 'http://192.168.188.122/cm?cmnd=status%200',
                    idCont: 'gruppe_heber_Device_3'
                },
                {
                    url: 'http://192.168.188.123/cm?cmnd=status%200',
                    idCont: 'gruppe_heber_Device_4'
                },
                {
                    url: 'http://192.168.188.124/cm?cmnd=status%200',
                    idCont: 'gruppe_heber_Device_5'
                },
                {
                    url: 'http://192.168.188.72/cm?cmnd=status%200',
                    idCont: 'gruppe_heber_Device_6'
                }

habe ich erst jetzt kapiert...

Jetzt aber noch eine Idee, ich bekomme ja über die Schleife (siehe oben) so einige Wert aus dem Fetch, der Statusmeldung von Tasmota. Dabei ist auch

Code:

<div id="gruppe_heber_Device_2">

   <div class="IPAddress"></div>

</div>

die IP Adresse von dem Tasmota Device. Wie könnte aus der Variable "<div class="IPAddress"></div>" gleich ein Link mit der Adresse als auswahl machen.. in der Form so

Code:

<div li><href= class = "IPAddress"></li></div>

Leider weiss ich nicht weiter....

Grüße MAT

[Sempervivum]

Wieder bin ich mir nicht sicher ob ich das richtig verstehe, vor allem das, was Du als "Megaschleife" bezeichnest.

In diesem Div

Code:

<div class="IPAddress"></div>

steht eine IP-Adresse und Du möchtest diese in einem Link verwenden?

Das müsste dann so aussehen:

Code:

const
    source = document.querySelector('div.IPAddress'),
    ip = source.textContent,
    dest = document.querySelector('a.IPAddress'),
    url = `http://${ip}/cm?etc`;
dest.href = url;

Wobei das Ziel bzw. der Link so aussehen müsste:

Code:

<a class="IPAddress">Text für den Link</a>

[mat-sche]

.... und ich dachte es geht einfacher... ich glaube ich bleibe erst einmal bei dem was zur Zeit geht. Hätte nicht gedacht, dass die Erstellung einer Webseite so "kompliziert" ist.
Meine Seite läuft unn, ist zwar teilweise Spagetticode..    
Vielen DAnk für Deine Hilfe... Kommen noch bestimmt weitere Seiten dazu