Got it.
Thanks again.
-
When a variable is declared without being assigned a value its initial value is undefined. So before creating the element due to the carriage return you going you are trying to read a variable that is not defined. You can wrap that code in something like
to skip any items which are not defined.Code:if (typeof myVar !== 'undefined') { ...some code... }Leave a comment:
-
That's so cool.
I did find why I had that large area before the table. I had inadvertently put a carriage return in my text string. My very bad.
Here is the return from the console
{Name: "HomeSeer Devices", Version: "1.0", Devices: Array(659)}
I'm looping thru the devices array to parse the information I want, starting from 0 to the length of the array. I thought I might have read past the end of the array thus producing the 'undefined' error but the error persists.
Thanks for the help; I'm really enjoying learning.
Leave a comment:
-
You may be able to expand the Div to see more. Using the Select Element tool does that automatically and takes you to that element in the page definition.
You can also add a line after you set your object:
and then see the object in the console. Expand it to see the different parts and how it is defined. I find it good to have that visual of the object.Code:console.log(myObj);
Leave a comment:
-
Oh, wow! I never knew that tool was available. Unfortunately, I am building the table in Javascript so the only thing that shows up is the <DIV> in HTML.
I think I am picking up a bunch of stuff when I am deserializing the JSON request. I never have been able to figure out the parent child relationships.
Perhaps I will exclude the table and see what is left.
Thanks again for the advice. A great help.Leave a comment:
-
In Chrome's Developer Tools select Elements instead of Console. Then select the icon that is a square with a cursor in the bottom right. Floating over this should give you a help tip stating "Select an element in the page to inspect it." You can also use Ctrl+Shift+C to get to this point. Then move the cursor to the undefined or large space and click that. This should take you to that portion of the rendered HTML code. See if that gives you any indication. Look for something which may be adding those elements. Feel free to post that code as well.Leave a comment:
-
Thanks for looking at my code.
Yeah, I caught the semicolon, and it didn't change the issue.
If I don't run the function, the large space and undefined statement don't appear.
I'm using chrome and the console shows no errors.
If it's any help, here is the html page
PHP Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link type="text/css" href="/css/hs.css" rel="stylesheet" />
<link type="text/css" href="/css/Custom.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="light.css">
<script src="light.js"></script>
<title>All Lights</title>
</head>
<body onLoad="start1()">
<div id='lightTable'>LightTable</div>
</html>
Leave a comment:
-
Shouldn't matter, but you are missing a semicolon at the end of the line defining devString. What is the output of you don't run the function? Have you looked at Developer Tools to see what the page definition is? It appears that is outside your table. Also, what do you get without running the function?Leave a comment:
-
This is the raw output from the JSON request;
PHP Code:{
"Name": "HomeSeer Devices",
"Version": "1.0",
"Devices": [
{
"ref": 3063,
"name": "Air AR-00000077",
"location": "",
"location2": "",
"value": 0,
"status": "Enabled",
"device_type_string": "WeatherFlow data",
"last_change": "/Date(1575648981925-0700)/",
"relationship": 2,
"hide_from_view": true,
"associated_devices": [
3064,
3065,
3066,
3067,
3068,
3069,
3070,
3071,
3072,
3073,
3074
],
"device_type": {
"Device_API": 4,
"Device_API_Description": "Plug-In API",
"Device_Type": 1,
"Device_Type_Description": "Plug-In Type 1",
"Device_SubType": 0,
"Device_SubType_Description": ""
},
"device_type_values": null,
"UserNote": "",
"UserAccess": "Any",
"status_image": "/images/HomeSeer/ui/enabled.png",
"voice_command": "",
"misc": 304,
"interface_name": "WeatherFlow"
},
{
"ref": 3075,
"name": "Sky SK-00014296",
"location": "",
"location2": "",
"value": 0,
"status": "Enabled",
"device_type_string": "WeatherFlow data",
"last_change": "/Date(1575649001785-0700)/",
"relationship": 2,
"hide_from_view": true,
"associated_devices": [
3076,
3077,
3078,
3079,
3080,
3081,
3082,
3083,
3084,
3085
],
"device_type": {
"Device_API": 4,
"Device_API_Description": "Plug-In API",
"Device_Type": 1,
"Device_Type_Description": "Plug-In Type 1",
"Device_SubType": 0,
"Device_SubType_Description": ""
},
"device_type_values": null,
"UserNote": "",
"UserAccess": "Any",
"status_image": "/images/HomeSeer/ui/enabled.png",
"voice_command": "",
"misc": 304,
"interface_name": "WeatherFlow"
},
{
"ref": 1862,
"name": "UPS1 Last on Battery",
"location": "APCUPSD",
"location2": "",
"value": 0,
"status": "",
"device_type_string": "Timestamp",
"last_change": "/Date(1575648952689-0700)/",
"relationship": 4,
"hide_from_view": false,
"associated_devices": [
1209
],
"device_type": {
"Device_API": 4,
"Device_API_Description": "Plug-In API",
"Device_Type": 14,
"Device_Type_Description": "Plug-In Type 14",
"Device_SubType": 0,
"Device_SubType_Description": ""
},
"device_type_values": null,
"UserNote": "",
"UserAccess": "Any",
"status_image": "images/apcupsd/status/clock_on.png",
"voice_command": "",
"misc": 4880,
"interface_name": "APCUPSD"
}, ....... Rest deleted for brevity
Leave a comment:
-
JavaScript help request
I could use some advice from any javascript guys out there.
I have a javascript function that builds a table from the result of a JSON call. It works as hoped with the exception of
an unexpected space in the web page and an undefined element. I'm assuming that I have somehow screwed up the
loop that goes through the result.
Can anyone suggest a way to troubleshoot this?
}PHP Code:function populateTable() {
var xhr1 = new XMLHttpRequest();
xhr1.open('GET', '/JSON?request=getstatus', true);
xhr1.send(null);
xhr1.onreadystatechange = function() {
if (xhr1.readyState == 4) {
var myObj = JSON.parse(xhr1.responseText);
var countKey = Object.keys(myObj).length;
var light_table = document.getElementById('lightTable');
var devString
var i;
var g = 1;
var mycmd = 'off';
//starting table
devString = devString + '<table>';
devString = devString + '<tr><th></th><th></th><th>Device</th><th>Control</th></tr>';
for (i = 0; i < myObj.Devices.length; i++) {
if (myObj.Devices[i].device_type_string == "Z-Wave Switch Binary"||myObj.Devices[i].device_type_string == "Z-Wave Switch Multilevel") {
if (myObj.Devices[i].value == 0){
mycmd = 'on';
console.log('Value:' + myObj.Devices[i].value);
}
myname = myObj.Devices[i].name;
myref = myObj.Devices[i].ref;
myimage = '<img src="' + myObj.Devices[i].status_image +'" style=\'width:32px;height:32px;\'>'
mybutton = '<button class=\'button\' value=\'Toggle\' onClick="deviceCmd(\'' + myref + '\',\' '+ mycmd + '\')">' + mycmd + '</button>' ;
devString = devString + '<tr><td>' +g + '</td><td>' + myimage +'</td><td>' + myname + '</td><td> ' + mybutton + '</td></tr><br>';
g++;
}
}
devString = devString + '</table>';
//finished table
light_table.innerHTML = devString;
}
}
Thanks
Leave a comment: