ESP8266 Community Forum

- Fri Mar 05, 2021 2:17 am #90706 Hi, I use two same javascript function I change just the variable and name to display datas on my webpage.
The first function is working but not the second.
On the browser I receive this error:

Uncaught SyntaxError: Unexpected token O in JSON at position 6
at JSON.parse (<anonymous>)
at XMLHttpRequest.xmlhttp.onreadystatechange ((index):64)

The function refreshSoilHumidity working, I see the data on page.
The function refreshSolenoid dosen't working.

Code: Select all<p><span id="t0"></span><span id="s0"></span></p>
 <p><span id="t1"></span><span id="s0"></span></p>
 <p><span id="t2"></span><span id="s2"></span></p>
 <p><span id="t3"></span><span id="s3"></span></p>
 <p><span id="t4"></span><span id="s4"></span></p>

Code: Select all<script type="text/javascript">
   refresh();
   setInterval(refresh, 1000);
   function refresh(){
     refreshSoilHumidity();
     refreshSolenoid();
     refreshPump();
   }

   function refreshSoilHumidity(){
     var xmlhttp = new XMLHttpRequest();
     xmlhttp.onreadystatechange = function() {
       if (xmlhttp.readyState == XMLHttpRequest.DONE && xmlhttp.status == 200){
        const parsedData = JSON.parse(xmlhttp.responseText);
        document.getElementById("t0").innerHTML = "SoilHumidity Sensor 0: " + parsedData.t0 + "%";
        document.getElementById("t1").innerHTML = "SoilHumidity Sensor 1: " + parsedData.t1 + "%";
        document.getElementById("t2").innerHTML = "SoilHumidity Sensor 2: " + parsedData.t2 + "%";
        document.getElementById("t3").innerHTML = "SoilHumidity Sensor 3: " + parsedData.t3 + "%";
        document.getElementById("t4").innerHTML = "SoilHumidity Sensor 4: " + parsedData.t4 + "%";
       }
     };
     xmlhttp.open("GET", "/SoilHumidity", true);
     xmlhttp.send();
   }

   function refreshSolenoid(){
     var xmlhttp = new XMLHttpRequest();
     xmlhttp.onreadystatechange = function() {
       if (xmlhttp.readyState == XMLHttpRequest.DONE && xmlhttp.status == 200){
        const parsedData = JSON.parse(xmlhttp.responseText);
        document.getElementById("s0").innerHTML = "Solenoid0 State 0: " + parsedData.s0;
        document.getElementById("s1").innerHTML = "Solenoid1 State 1: " + parsedData.s1;
        document.getElementById("s2").innerHTML = "Solenoid2 State 2: " + parsedData.s2;
        document.getElementById("s3").innerHTML = "Solenoid3 State 3: " + parsedData.s3;
        document.getElementById("s4").innerHTML = "Solenoid4 State 4: " + parsedData.s4;
       }
     };
     xmlhttp.open("GET", "/Solenoid", true);
     xmlhttp.send();
   }

   function refreshPump(){
     var xmlhttp = new XMLHttpRequest();
     xmlhttp.onreadystatechange = function() {
       if (xmlhttp.readyState == XMLHttpRequest.DONE && xmlhttp.status == 200){
        document.getElementById("pumpState").innerHTML = "Pump State: " + this.responseText;
       }
     };
     xmlhttp.open("GET", "/pump", true);
     xmlhttp.send();
    }
 </script>

the ending of my first working function

Code: Select allString json = "{\"t0\":" + String(sensor0) + ",\"t1\":" + String(sensor1)+ ",\"t2\":" + String(sensor2)+ ",\"t3\":" + String(sensor3)+ ",\"t4\":" + String(sensor4)+ "}";
  server.send (200, "application/json", json);

the ending of my second not working function

Code: Select allString json1 = "{\"s0\":" + String(solenoidState0) + ",\"s1\":" + String(solenoidState1)+ ",\"s2\":" + String(solenoidState2)+ ",\"s3\":" + String(solenoidState3)+ ",\"s4\":" + String(solenoidState4)+ "}";
  server.send (200, "application/json", json1);

The full code you can see here: https://pastebin.com/raw/3qUB04z4
How to send all datas on the correct way ?