How to store SensorThings query result into a variable in JavaScript/jQuery
Question
I am trying to read a thing entity from a SensorThings server ( https://scratchpad.sensorup.com/OGCSensorThings/v1.0/ ) by using GET method via JavaScript/jQuery and store the result into a variable named thing so that I can use the variable in another part of the script.
Here is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Read Thing</title>
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h1>Read Thing</h1>
<h2 id="thing_name"></h2>
<script>
var thing = $.ajax({
url: "https://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)",
type: "GET",
contentType: "application/json; charset=utf-8",
success: function(data){
console.log(data);
return data;
},
error: function(response, status){
console.log(response);
console.log(status);
}
});
</script>
</body>
</html>
And after I run it in the browser, I got the result like this:
{@iot.id: 1785996, @iot.selfLink: "http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)", description: "Thing Description 15", name: "Thing Name 16", properties: {…}, …}
@iot.id
:
1785996
@iot.selfLink
:
"http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)"
Datastreams@iot.navigationLink
:
"http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)/Datastreams"
HistoricalLocations@iot.navigationLink
:
"http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)/HistoricalLocations"
Locations@iot.navigationLink
:
"http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)/Locations"
description
:
"Thing Description 15"
name
:
"Thing Name 16"
properties
:
{Thing Property Name 16: "Thing Property Description 16", Thing Property Name 15: "Thing Property Description 15"}
__proto__
:
Object
Based on that result, I tried to do some query:
>>> thing
{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}abort: ƒ (a)always: ƒ ()complete: ƒ ()done: ƒ ()error: ƒ ()fail: ƒ ()getAllResponseHeaders: ƒ ()getResponseHeader: ƒ (a)overrideMimeType: ƒ (a)pipe: ƒ ()progress: ƒ ()promise: ƒ (a)readyState: 4responseJSON: {@iot.id: 1785996, @iot.selfLink: "http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)", description: "Thing Description 15", name: "Thing Name 16", properties: {…}, …}responseText: "{"@iot.id":1785996,"@iot.selfLink":"http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)","description":"Thing Description 15","name":"Thing Name 16","properties":{"Thing Property Name 16":"Thing Property Description 16","Thing Property Name 15":"Thing Property Description 15"},"Datastreams@iot.navigationLink":"http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)/Datastreams","HistoricalLocations@iot.navigationLink":"http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)/HistoricalLocations","Locations@iot.navigationLink":"http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)/Locations"}"setRequestHeader: ƒ (a,b)state: ƒ ()status: 200statusCode: ƒ (a)statusText: "OK"success: ƒ ()then: ƒ ()__proto__: Object
>>> thing.responseJSON
{@iot.id: 1785996, @iot.selfLink: "http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)", description: "Thing Description 15", name: "Thing Name 16", properties: {…}, …}
>>> thing.responseJSON["name"]
"Thing Name 16"
>>> var thing_name = thing.responseJSON["name"]
undefined
>>> thing_name
"Thing Name 16"
It seemed that the code run successfully. However, when I insert the query into the script and tried to display the output in the console (I only display the script tag here, other lines are the same as the code above), such as:
<script>
var thing = $.ajax({
url: "https://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)",
type: "GET",
contentType: "application/json; charset=utf-8",
success: function(data){
console.log(data);
return data;
},
error: function(response, status){
console.log(response);
console.log(status);
}
});
var thing_name = thing.responseJSON["name"];
console.log("Thing Name: " + thing_name);
// I want to insert the variable into a h2 tag in the page
document.querySelector("#thing_name").innerHTML = thing_name;
</script>
I got an error like this:
Uncaught TypeError: Cannot read property 'responseJSON' of undefined
at read_thing.htm:36
(anonymous) @ read_thing.htm:36
read_thing.htm:27 {@iot.id: 1785996, @iot.selfLink: "http://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)", description: "Thing Description 15", name: "Thing Name 16", properties: {…}, …}
It seemed that the script did not store the result into the variable thing successfully. When I tried to display the content of the variable in the console, the output was undefined .
So, how should I modify my script to get the result into a variable? Thanks in advance.
Cheers,
1 answers
solution1
0 ACCPTED 2018-03-10 03:17:04
Move that code near the end of your scripts into the success method of the ajax call, like this:
<script>
var thing = $.ajax({
url: "https://scratchpad.sensorup.com/OGCSensorThings/v1.0/Things(1785996)",
type: "GET",
contentType: "application/json; charset=utf-8",
success: function(data){
console.log(data);
var thing_name = thing.responseJSON["name"];
console.log("Thing Name: " + thing_name);
// I want to insert the variable into a h2 tag in the page
document.querySelector("#thing_name").innerHTML = thing_name;
return data;
},
error: function(response, status){
console.log(response);
console.log(status);
}
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.