Howto have JavaScript calling the API (cross origin issue)

Developer's Corner General Dev Discussions
41

[quote=“BulldogLowell, post:40, topic:182757”]your function doesn’t seem to be handling a return from the call to the server.

What are you returning (what kind of object… i.e. JSON) and how to handle it…

posting the JSON response would help if you are having trouble parsing that.[/quote]

I’m just using the standard http request facility within Vera, either.

http://192.168.1.234:3480/data_request?id=variableget&DeviceNum=237&serviceId=urn:upnp-org:serviceId:TemperatureSensor1&Variable=CurrentTemperature&output_format=json
http://192.168.1.234:3480/data_request?id=variableget&DeviceNum=237&serviceId=urn:upnp-org:serviceId:TemperatureSensor1&Variable=CurrentTemperature&output_format=text
http://192.168.1.234:3480/data_request?id=variableget&DeviceNum=237&serviceId=urn:upnp-org:serviceId:TemperatureSensor1&Variable=CurrentTemperature

Either one of the 3 above, will return the temperature reading for sensor 237, in this case it’s simply showing the value 23.7 on the returned web page.

42

as JSON, yes?

so, parse your JSON return… how about using the jquery:

function getTemp(){ var tempURL = "http://192.168.1.234:3480/data_request?id=variableget&DeviceNum=237&serviceId=urn:upnp-org:serviceId:TemperatureSensor1&Variable=CurrentTemperature&output_format=json; $.getJSON(tempURL, function(data) { console.log(data); // Check out what your return actually looks like int he console... document.getElementById("currentTemp").innerHTML = "Office Room Temp: " + parseFloat(data) + "°C"; }); }

43

Thanks @BulldogLowell

Sadly I’m just someone who tries to adjust and learn from examples I find online/this forum and look to make them work for how I want them too. So unfortunately I don’t have a web developer background to fully understand all the differences and benefits of jQuery vs JavaScript.

So to incorporate your suggested code, do I do the following

Add this into the ‘head’ section

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

And then update/adjust the body to something like this , which calls the new getTemp function onload ?

[code] 

        <div id="spacepeopleContainer">

            <h3 id="vera"></h3>
            <h2 id="device_name"></h2>
            <h1 id="temp"></h1>

        </div><!-- spacepeopleContainer -->

    </div><!-- main -->
</body>
function updateCal() { 
var VeraName = document.getElementById("vera")
VeraName.innerHTML = 'Vera Home Control';

            }

function getTemp(){
var tempURL = "http://192.168.1.234:3480/data_request?id=variableget&DeviceNum=237&serviceId=urn:upnp-org:serviceId:TemperatureSensor1&Variable=CurrentTemperature&output_format=json;
$.getJSON(tempURL, function(data) {
console.log(data); // Check out what your return actually looks like int he console…
document.getElementById(“currentTemp”).innerHTML = "Office Room Temp: " + parseFloat(data) + “°C”;
});
}

   </script>
[/code]
44

Well that’s a very old version of jQuery, so I’d update that!

Try to make a very basic web page that will test just what you are trying to do, so you completely understand what you are trying to accomplish.

Something like this:

[code]

fetching temperature...

[/code]
45

Thanks

Sadly when I try that simple page, it doesn’t return a temp value.

Did it work for you? I just get this.

fetching temperature...
46

[quote=“parkerc, post:45, topic:182757”]Thanks

Sadly when I try that simple page, it doesn’t return a temp value.

Did it work for you? I just get this.

fetching temperature...
[/quote]

I cannot test it

What did the Console in your browser tell you?