Announcement

Collapse
No announcement yet.

JavaScript help request

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    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 
    1;
                    var 
    mycmd 'off';

                    
    //starting table

                    
    devString devString '<table>';
                    
    devString devString +  '<tr><th></th><th></th><th>Device</th><th>Control</th></tr>';
                     for (
    0myObj.Devices.lengthi++) {    

                        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>' +'</td><td>' myimage +'</td><td>' myname '</td><td>  ' mybutton '</td></tr><br>';
                        
    g++;
                        }
                    }
                
    devString devString '</table>';
                
    //finished table

                
    light_table.innerHTML devString;
             }
            } 
    } Click image for larger version  Name:	don.png Views:	36 Size:	384.7 KB ID:	1345757

    Thanks
    Don

    #2
    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 
    Don

    Comment


      #3
      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?
      Karl S
      HS4Pro on Windows 10
      242 Devices
      56 Z-Wave Nodes
      37 Events
      HSTouch Clients: 3 Android, 1 iOS
      Google Home: 3 Mini units 1 display

      Comment


        #4
        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
        Don

        Comment


          #5
          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.
          Karl S
          HS4Pro on Windows 10
          242 Devices
          56 Z-Wave Nodes
          37 Events
          HSTouch Clients: 3 Android, 1 iOS
          Google Home: 3 Mini units 1 display

          Comment


            #6
            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.
            Don

            Comment


              #7
              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:
              Code:
              console.log(myObj);
              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.
              Karl S
              HS4Pro on Windows 10
              242 Devices
              56 Z-Wave Nodes
              37 Events
              HSTouch Clients: 3 Android, 1 iOS
              Google Home: 3 Mini units 1 display

              Comment


                #8
                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.
                Don

                Comment


                  #9
                  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
                  Code:
                  if (typeof myVar !== 'undefined') { ...some code... }
                  to skip any items which are not defined.
                  Karl S
                  HS4Pro on Windows 10
                  242 Devices
                  56 Z-Wave Nodes
                  37 Events
                  HSTouch Clients: 3 Android, 1 iOS
                  Google Home: 3 Mini units 1 display

                  Comment


                    #10
                    Got it.
                    Thanks again.
                    Don

                    Comment

                    Working...
                    X