MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    read csv-data and put it in an array

    Scheduled Pinned Locked Moved Utilities
    313 Posts 3 Posters 439.8k Views 4 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • PerlchampP Offline
      Perlchamp
      last edited by

      and the parent-element itselfs get a 0 (null) as parent ?

      S 1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil @Perlchamp
        last edited by

        @Perlchamp i usually don’t use it for wrapper, but yes… the routine would have to check and not set if parent null, same for id

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • PerlchampP Offline
          Perlchamp
          last edited by

          doesn’t work (black screen) yet, BUT:

          1. the classes set in “” ?
          2. no use of appendchild ?
          3. the wrapper set in “” ?

          i did :

          1. no
          2. correct
          3. no

          question:
          get i problems with this.create… because of “var self = this” ?

          1 Reply Last reply Reply Quote 0
          • PerlchampP Offline
            Perlchamp
            last edited by

            my code (only table):

            	    // create table
            	    var wrapper = this.createEl('table', "birthday-table", table , 0)
            	    //var wrapper = document.createElement("table");
            	    //wrapper.className = 'table'; 
            	    //wrapper.id = 'birthday-table';
            
            	    // create header
            	    var tHeader = this.createEl('thead', "birthday-thead", thead , wrapper)
            	    //var tHeader = document.createElement("thead");
            	    //tHeader.className = "thead";
            	    //tHeader.id = "birthday-thead";
            
            	    var headerTR = this.createEl('tr', "birthday-tr-head", tr-head , tHeader)
            	    //var headerTR = document.createElement("tr");
            	    //headerTR.className = "tr-head";
            	    //headerTR.id = "birthday-tr-head";			    
            
            	    var headerTH = document.createElement("th");
            	    //var headerTH = this.createEl('th', "birthday-th-head", th-head , headerTR)
            	    headerTH.colSpan = "2";
            	    headerTH.scope = "col";
            	    headerTH.innerHTML = " ";
            	    //headerTH.className = "th-head";
            	    //headerTH.id = "birthday-th-head";
            	    
            	    //headerTR.appendChild(headerTH);
            	    //tHeader.appendChild(headerTR);
            	    //wrapper.appendChild(tHeader);
            		    
            	    // Create TFOOT section -- currently used for debugging only
            	    var tFooter = this.createEl('tfoot', "birthday-tfood", tfoot , wrapper)
            	    //var tFooter = document.createElement('tfoot');
            	    //tFooter.className = "tfoot";
            	    //tFooter.id = "birthday-tfoot";
            
            	    //var footerTR = document.createElement("tr");
            	    var footerTR = this.createEl('tr', "birthday-tf-foot", tr-foot , tFooter)
            	    //footerTR.className = "tr-foot";
            	    //footerTR.id = "birthday-tr-foot";
            
            	    //var footerTD = document.createElement("td");
            	    var footerTD = this.createEl('td', "birthday-td-foot", td-foot , footerTR)
            	    footerTD.colSpan ="2";
            	    //footerTD.className = "td-foot";
            	    //footerTD.id = "birthday-td-foot";
            	    if (this.config.debugging) {
            		footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode! < br / > Please see console log.";
            	    }
            	    else {
            		footerTD.innerHTML = "&nbsp;";
            	    }
            
            	    //footerTR.appendChild(footerTD);
            	    //tFooter.appendChild(footerTR);
            	    //wrapper.appendChild(tFooter);
            
            	    // create TBODY section with day names
            	    var tBody = this.createEl('tBody', "birthday-tbody", tbody , wrapper)
            	    //var tBody = document.createElement("tBody");
            	    //tBody.className = "tbody";
            	    //tBody.id = "birthday-tbody";
            	    
            	    for(var birthday of Object.keys(this.active_birthdays)) {
            		for(var person of this.active_birthdays[birthday]) {
            				
            		    //var m = document.createElement('div');
            				
            		    // create looped row section
            		    var bodyTR = this.createEl('tr', "birthday-tr-body", tr-body , tBody)
            		    //var bodyTR = document.createElement("tr");
            		    //bodyTR.className = "tr-body";
            		    //bodyTR.id = "birthday-tr-body";
            
            		    var bodyTDimage = this.createEl('td', "birthday-td-image", td-image , bodyTR)
            		    //var bodyTDimage = document.createElement("td");
            		    //bodyTDimage.className = "td-image";
            		    //bodyTDimage.id = "birthday-td-image";
            		    if (birthday.charAt(0) === "0") {
            			birthday = birthday.replace("0","");
            			birthday = birthday.substring(0,1);
            		    }
            		    bodyTDimage.innerHTML = birthday.substring(0,2);
            
            		    var bodyTD = this.createEl('td', "birthday-td-body", td-body , bodyTDimage)
            		    //var bodyTD = document.createElement("td");
            		    //bodyTD.className = "td-body";
            		    //bodyTD.id = "birthday-td-body";
            		    bodyTD.innerHTML = person.name + "&nbsp;&nbsp;&nbsp; < span class=\"age-span\" > " + person.age + " < /span > ";
            		    				
            		    //m.innerText = birthday + ' ' + person.name + ' age=' + person.age;
            		    //wrapper.appendChild(m);
            		    
            		    //bodyTR.appendChild(bodyTDimage);
            		    //bodyTR.appendChild(bodyTD);
            		    //tBody.appendChild(bodyTR);
            		    //wrapper.appendChild(tBody);
            		    
            		}
            	    }
            
            
            S 1 Reply Last reply Reply Quote 0
            • S Offline
              sdetweil @Perlchamp
              last edited by sdetweil

              @Perlchamp all except parent in quotes

              tables parent is wrapper, wrappers parent is null/0

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              S 1 Reply Last reply Reply Quote 0
              • PerlchampP Offline
                Perlchamp
                last edited by

                wrapper in quotes , too ?

                S 1 Reply Last reply Reply Quote 0
                • S Offline
                  sdetweil @sdetweil
                  last edited by sdetweil

                  @sdetweil if there is no data, then you still need to return something (empty div)

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • S Offline
                    sdetweil @Perlchamp
                    last edited by

                    @Perlchamp wrapper is a div type, no id,class or parent

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    1 Reply Last reply Reply Quote 0
                    • PerlchampP Offline
                      Perlchamp
                      last edited by

                      my code now does not work:

                                  // create table
                      	    var wrapper = this.createEl('table', "birthday-table", table , 0)
                      	    
                      	    // create header
                      	    var tHeader = this.createEl('thead', "birthday-thead", thead , "")
                      	    var headerTR = this.createEl('tr', "birthday-tr-head", tr-head , "tHeader")
                      	    var headerTH = this.createEl('th', "birthday-th-head", th-head , "headerTR")
                      	    headerTH.colSpan = "2";
                      	    headerTH.scope = "col";
                      	    headerTH.innerHTML = "&nbsp;";
                      	        
                      	    // Create TFOOT section -- currently used for debugging only
                      	    var tFooter = this.createEl('tfoot', "birthday-tfood", tfoot , "")
                      	    var footerTR = this.createEl('tr', "birthday-tf-foot", tr-foot , "tFooter")
                      	    var footerTD = this.createEl('td', "birthday-td-foot", td-foot , "footerTR")
                      	    footerTD.colSpan ="2";
                      	    if (this.config.debugging) {
                      		footerTD.innerHTML = "Birthdaylist is currently in DEBUG mode! < br / > Please see console log.";
                      	    }
                      	    else {
                      		footerTD.innerHTML = "&nbsp;";
                      	    }
                      
                      	    // create TBODY section with day names
                      	    var tBody = this.createEl('tBody', "birthday-tbody", tbody , "")
                      	    
                      	    for(var birthday of Object.keys(this.active_birthdays)) {
                      		for(var person of this.active_birthdays[birthday]) {
                      				
                      		    // create looped row section
                      		    var bodyTR = this.createEl('tr', "birthday-tr-body", tr-body , "tBody")
                      		    var bodyTDimage = this.createEl('td', "birthday-td-image", td-image , "bodyTR")
                      		    if (birthday.charAt(0) === "0") {
                      			birthday = birthday.replace("0","");
                      			birthday = birthday.substring(0,1);
                      		    }
                      		    bodyTDimage.innerHTML = birthday.substring(0,2);
                      		    var bodyTD = this.createEl('td', "birthday-td-body", td-body , "bodyTDimage")
                      		    bodyTD.innerHTML = person.name + "&nbsp;&nbsp;&nbsp; < span class=\"age-span\" > " + person.age + " < /span > ";
                      		    				
                      		}
                      	    }
                      
                      S 1 Reply Last reply Reply Quote 0
                      • S Offline
                        sdetweil @Perlchamp
                        last edited by sdetweil

                        @Perlchamp said in read csv-data and put it in an array:

                        ", thead ,

                        again all classes in quotes, ONLY parent NOT in quotes

                         var wrapper = this.createEl('table', "birthday-table", "table" , null)
                        	    var tHeader = this.createEl('thead', "birthday-thead", "thead" , wrapper )
                        	    var headerTR = this.createEl('tr', "birthday-tr-head", "tr-head" , tHeader)
                        	    var headerTH = this.createEl('th', "birthday-th-head", "th-head" , headerTR)
                        

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 22
                        • 23
                        • 24
                        • 25
                        • 26
                        • 31
                        • 32
                        • 24 / 32
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy