Abfrage der API JSON-Daten mit JS

Hallo Zusammen,

ich bastel mir aktuell eine kleine Homepage zusammen, die ich lokal von jedem Endgerät abrufen kann um so grundlegende Funktionen in dem "Smarthome" zu steuern.

Nun möchte ich aber auch einige Daten der Shellys vorher abfragen und anzeigen lassen, damit man den IST Zustand des Shellys auf den Seiten sieht.

Als Beispiel möchte ich einfach die aktuell eingestellten RGB Werte abfragen und anzeigen, da diese sonst mit jeder Seitenaktualisierung in meinem Slider wieder den Defaultwert annehmen würden.

Im Prinzip frage ich nur die JSON Ausgabe per script ab. Und lasse mir die Werte für rot, grün, blau ausgeben. So der Plan!

Leider funktioniert aber die Abfrage mit meinem js Script bei den Shellys nicht. Ich habe alternativ verschiedene Adressen mit JSON Ausgabe getestet. Alle funktionierten und haben mir den gewünschten Wert angezeigt. Nur die Shellys wollen mir die Werte per js nicht anzeigen. Im Browser als "HTTP- Befehl" natürlich schon, aber ich brauche das ganze als JS - JQuery Script.

Anbei mal das Script, mit welchem ich im Prinzip bis jetzt alle JSON Datein parsen konnte. Nur die Shellys wollen absolut nicht die Werte hergeben!

Ich würde mich freuen, wenn jemand hier eine Idee oder einen Ansatz für die Umsetzung hat.

Hier die gemessene Energie als Beispiel.

 $.getJSON('http://192.168../meter/0?state', function(data){
var Energie = `${data.power} kwh`
$(".SHplug").html(Energie);
});
const refreshButton = document.querySelector('.SHplug');
       
const refreshPage = () => {
location.reload();
}
       
refreshButton.addEventListener('click', refreshPage)

Hallo Zusammen,

nun die Lösung

um die Shellys mit JS Scripten anzusprechen und abzufragen, muss die "Access-Control-Allow-Origin" Meldung mitgesendet werden. Da diese nicht vorhanden ist, wird leider der direkte Zugriff auf Anfragen an die Shellys blockiert und gibt die JSON Response somit nicht aus.

Nun gibt es 2 Möglichkeiten die funktionieren um das Problem zu umgehen. Einfach die "Erlaubnis" im header mit zu senden wäre leider zu einfach und funktionierte bei mir nicht.

Nr. 1. Wer die Abfragen nur lokal senden will, oder sich in der Erstellung der Scripte befindet, der installiert einfach das "Cors" Plugin für seinen Browser und aktiviert die Einstellungen dafür. Bei jeder Anfrage werden nun die entsprechenden Berechtigungen mitgesendet und die JSON Antwort erfolgt in der gewünschten Ausgabe. (Der Chromebrowser war hier mit dem Plugin zuverlässiger!)

Nr. 2. Wer es praxistauglicher wie ich brauch, der kann seinen Webserver einfach die Berechtigung erteilen und stellt die Anfrage also mit kleinem Umweg. Die Berechtigungen werden dann durch den Server mit gesendet und verarbeitet. Getestet heute mit einem Apache2 Server und mehreren JS Scripten an diverse Shellys.

Manchmal liegen die Lösungen noch näher wie gedacht. 👌🙂

Wird getestet!