Display JSON from thingspeak into HTML

Question

This was done 2 years ago and was working until today

It used to get data from a JSON on thingspeak and display it to me

I need help to understand what happened and how to fix it

<html>
<head>
<script>
var request = new XMLHttpRequest();
request.open('GET', 'https://api.thingspeak.com/channels/527143/feeds.json? 
api_key=I6AD9OVB2SXX03HC&results=1', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var data = JSON.parse(request.responseText);
    var dia = date.getDate();
    var mes = date.getMonth();
    mes++;
    var ano = date.getFullYear();
    var hora = date.getHours();
    var minuto = date.getMinutes();
    document.getElementById("camb").innerHTML = "Câmbio Dólar: R$ " + data.feeds[0].field1 +  " | 
    Atualizado em " + dia + "/" + mes + "/" + ano + " às " + hora + ":" + minuto;
    } else {
    // We reached our target server, but it returned an error
     }
     };

    request.send();
    </script>
    </head>
    <body>
    <div  width = "100%" id="camb" style="font-size:15px; text-align:left; color: white; margin- 
     left: -300px; background-color: red; border-left: 300px solid red; border-bottom: 5px solid red; 
     border-top: 300px solid red; overflow: hidden;  margin-top: -300px; font-family: Brandon, 
     Grotesque, sans-serif;"></div>
  </body>
</html>

Apparently you're having cors errors. Most likely thingsspeak changed their api rules. But also your `request.responseText` doesnt return a javascript date so is likely you have more than one problem to solve — gugateider, Apr 15 '21 at 15:00

score 0 · Accepted Answer · answered Apr 15 '21 at 15:05

Run it like this and look at your console. It looks like you might have run your code through a beautifier or something and it altered the line breaks/broke your code.

You'll see that you're having issues with CORS. A good way to resolve this is https://github.com/Rob--W/cors-anywhere/

<html>
<head>
<script>
var request = new XMLHttpRequest();
var urlHere = "https://api.thingspeak.com/channels/527143/feeds.json?";
    urlHere = urlHere + "pi_key=I6AD9OVB2SXX03HC&results=1";
console.log(urlHere);
request.open('GET', urlHere, true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var data = JSON.parse(request.responseText);
    var dia = date.getDate();
    var mes = date.getMonth();
    mes++;
    var ano = date.getFullYear();
    var hora = date.getHours();
    var minuto = date.getMinutes();
    document.getElementById("camb").innerHTML = "Câmbio Dólar: R$ " + data.feeds[0].field1 +  " | Atualizado em " + dia + "/" + mes + "/" + ano + " às " + hora + ":" + minuto;
    } else {
    // We reached our target server, but it returned an error
     }
     };

    request.send();
    </script>
    </head>
    <body>
    <div  width = "100%" id="camb" style="font-size:15px; text-align:left; color: white; margin- 
     left: -300px; background-color: red; border-left: 300px solid red; border-bottom: 5px solid red; 
     border-top: 300px solid red; overflow: hidden;  margin-top: -300px; font-family: Brandon, 
     Grotesque, sans-serif;"></div>
  </body>
</html>

Hi, I tried to run this cors anywhere but it didn't work, as `var urlHere = "https://cors-anywhere.herokuapp.com/https://api.thingspeak.com/channels/527143/feeds.json?";` but it didn't work not sure if I understand how to run this cors anywhere` — erbe Wegw, Apr 15 '21 at 15:46
Here is a better breakdown https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe — user3135730, Apr 15 '21 at 17:01

Display JSON from thingspeak into HTML

1 Answers1