Abarbeitung einer Fetch - JavaSript

[mat-sche]

Liebes Forum,

ich benötige JavaScript in meinen Webseiten-Serveranwendungen auf einem ESP8266. Ich schicke per fetch über meinen ESP

Code:

server.send(200, "application/json", "[\"" +  String(bitRead(buttonstate_index[0], 0)) +                     // Sende Statuszustand
      "\",\"" +  String(bitRead(buttonstate_index[0], 1)) + "\",\"" +  String(bitRead(buttonstate_index[0], 2)) +
     "\",\"" +  String(bitRead(buttonstate_index[0], 3)) + "\",\"" +  String(bitRead(buttonstate_index[0], 4)) +
     "\",\"" +  String(bitRead(buttonstate_index[0], 5)) + "\",\"" +  String(bitRead(buttonstate_index[0], 6)) +
     "\",\"" +  String(bitRead(buttonstate_index[0], 7)) + "\",\"" +  String(bitRead(buttonstate_index[1], 0)) +
     "\",\"" +  String(bitRead(buttonstate_index[1], 1)) + "\",\"" +  String(bitRead(buttonstate_index[1], 2)) +
     "\",\"" +  String(bitRead(buttonstate_index[1], 3)) + "\",\"" +  String(bitRead(buttonstate_index[1], 4)) +
     "\",\"" +  String(bitRead(buttonstate_index[1], 5)) + "\",\"" +  String(bitRead(buttonstate_index[1], 6)) +
     "\",\"" +  String(bitRead(buttonstate_index[1], 7)) + "\", \"Tor offen""\"]");

die Daten, die auch schön im Browser vom Client abgearbeitet werden:

mit dem Programmteil erfolgt die Datenauswertung bestens:

Code:

function loadDaten() {
            fetch('/ButtonData')
                .then(function(response) {
                    return response.json();
                })
                .then(function(myArr) {
                    document.getElementById("Text-1").innerHTML = myArr[16];
                    buttonstate(0, myArr[0]);
                    buttonstate(1, myArr[1]);
                    buttonstate(2, myArr[2]);
                    buttonstate(3, myArr[3]);
                    buttonstate(4, myArr[4]);
                    buttonstate(5, myArr[5]);
                    buttonstate(6, myArr[6]);
                    buttonstate(7, myArr[7]);
                    buttonstate(8, myArr[8]);
                    buttonstate(9, myArr[9]);
                    buttonstate(10, myArr[10]);     
                    buttonstate(11, myArr[11]);
                    buttonstate(12, myArr[12]);
                    buttonstate(13, myArr[13]);
                    buttonstate(14, myArr[14]);
                    buttonstate(15, myArr[15]);
                    });

aber wenn ich aber :

Code:

document.getElementById("Text-1").innerHTML = myArr[16]

ans Ende der Funktion lege, werden die Daten nicht aus dem Array geladen.

Warum ist das denn so?

Grüße MAT

[admin]

Du weißt aber das die funktion nicht geschlossen ist oder ?
Da fehlt eine Klammer.
Was steht den in console.log(myArr[16]) , wenn du das dafür ersetzt ?
Gibt es überhaupt myArr[16] ?
Ich zähle 16 , dann dürfte myArr[15] das letzte sein.

Schau aber erstmal was in console.log(myArr[16]) steht , dann kann man weiter schauen

[mat-sche]

Liebes Forum,

schon etwas länger her aber immer noch das gleiche Thema. Mein obiger Post hat sich erledigt, über Web-Button kann ich nun auf meinem ESP Schalthandlungen ausführen.
jezt würde ich gern den Code im Script sowie auch auf der Arduino C++ Seite etwas ändern/verjüngen....verbessern ?! Der bisherige Code funktioniert ja... aber ich denke er kann besser umgesetzt werden.
Etwas zum Hintergrund:
Ich benötige immer ein Byte, in dem ich jedes Bit daraus auf 0 und 1 setze, je nachdem welcher Button auf der Webseite gedrückt wurde. So kann ich 8 Button pro Byte adressieren. Dieses Byte wird dann 1 zu 1 an ein I2C- IC (MCP23017 - Portexpander) weitergegeben, wo zum Schluss Relais geschalten werden.

Ich schicke per Fetch ein Json String, den ich in C++ folgend zusammen setze:

Code:

server.send(200, "application/json", "[\"" +  String(bitRead(buttonstate_index[0], 0)) +                                                                       // Sende Statuszustand
      "\",\"" +  String(bitRead(buttonstate_index[0], 1)) + "\",\"" +  String(bitRead(buttonstate_index[0], 2)) +
     "\",\"" +  String(bitRead(buttonstate_index[0], 3)) + "\",\"" +  String(bitRead(buttonstate_index[0], 4)) +
     "\",\"" +  String(bitRead(buttonstate_index[0], 5)) + "\",\"" +  String(bitRead(buttonstate_index[0], 6)) +
     "\",\"" +  String(bitRead(buttonstate_index[0], 7)) + "\",\"" +  String(bitRead(buttonstate_index[1], 0)) +
     "\",\"" +  String(bitRead(buttonstate_index[1], 1)) + "\",\"" +  String(bitRead(buttonstate_index[1], 2)) +
     "\",\"" +  String(bitRead(buttonstate_index[1], 3)) + "\",\"" +  String(bitRead(buttonstate_index[1], 4)) +
     "\",\"" +  String(bitRead(buttonstate_index[1], 5)) + "\",\"" +  String(bitRead(buttonstate_index[1], 6)) +
     "\",\"" +  String(bitRead(buttonstate_index[1], 7)) + "\", \"" + Tor + "\", \"" + server.client().remoteIP().toString() + "\"]");

Hier würde ich den Code gern kleiner gestallten, in dem ich nicht jedes Bit einzeln schicke. Ich würde gern nur z.bsp. das Byte als 0hff verschicke, ok ich weiß wie es geht.
Meine Frage ist nur, wie kann ich über eine Javascript dieses Byte wieder in 8 Bit umwandeln und dann den Button in der Webseite zuordnen?
Aktuell ordne ich die Bits den Button so ein:

Code:

function loadDaten() {

            fetch('/ButtonData')
                .then(function(response) {
                    return response.json();
                })
                .then(function(myArr) {
                    buttonstate(0, myArr[0]);           // LI_CarSpotDoor
                    buttonstate(1, myArr[1]);           // LI_CarSpot
                    buttonstate(2, myArr[2]);           // LI_CarPort
                    buttonstate(3, myArr[3]);           // LI_Tools
                    buttonstate(4, myArr[4]);           // Tor_Reed_100
                    buttonstate(5, myArr[5]);           // Tor_Reed_50         
                    buttonstate(6, myArr[6]);           // Tor_Reed_0
                    buttonstate(7, myArr[7]);                   
                    buttonstate(8, myArr[8]);
                    buttonstate(9, myArr[9]);
                    buttonstate(10, myArr[10]);     
                    buttonstate(11, myArr[11]);
                    buttonstate(12, myArr[12]);
                    buttonstate(13, myArr[13]);
                    buttonstate(14, myArr[14]);
                    buttonstate(15, myArr[15]);
                    document.getElementById("Text-1").innerHTML = myArr[16];
                    document.getElementById("Text-2").innerHTML = myArr[17];
                });
        }

und in HTML werden so die Button kreiert:

Code:

  <div class="grid-container_4">
            <!--Tor halb öffnen-->
            <div class="grid-item"><input type="button" style="height: 30px; width: 150px;font: bold 16px Arial;color: black;" id="5" onclick="btnPressed(id)" ></div>
            <!--Tor öffnen-->
            <div class="grid-item"><input type="button" style="height: 30px; width: 150px;font: bold 16px Arial;color: black;" id="4" onclick="btnPressed(id)" ></div>
            <!--Tor schließen-->
            <div class="grid-item"><input type="button" style="height: 30px; width: 150px;font: bold 16px Arial;color: black;" id="6" onclick="btnPressed(id)" ></div>
        </div>

Meine Idee wäre nun in einem Script per fetch die Daten einzulesen

Code:

function loadDaten() {

            fetch('/ButtonData')
                .then(function(response) {
                    return response.json();
                })
                .then(function(myArr) {

den String in ein Byte wandeln und dann über eine for next Schleife die einzelnen Bits in die Variable zu legen.

Aber wie ist hier die gute Frage, da ich mich sehr begrenst mit Javascribt nicht auskennen...
Wer könnte mir denn da weiterhelfen?

Vielen Dank für  Eure Hilfe!