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

      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 = " ";
            	        
            	    // 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
              • PerlchampP Offline
                Perlchamp
                last edited by

                does not work for me. complete getDom and your createEl :

                    createEl(type, id, class, parent){
                	var el = document.createElement(type);
                	el.id = id;
                	if(class); 
                	el.classname = class;
                	parent.addChild(el);
                	return el;
                    },
                
                    getDom: function() {
                	var self = this;
                	var wrapper = document.createElement("div");
                		
                	Log.log(JSON.stringify(this.active_birthdays))
                
                	if ((moment() > this.midnight) || (!this.loaded)) {
                	    var month = moment().month();
                	    var year = moment().year();
                	    var monthName = moment().format("MMMM");
                	    var monthLength = moment().daysInMonth();
                
                	    // create table
                	    var wrapper = this.createEl("table", "birthday-table", "table" , null)
                	    
                	    // create header
                	    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)
                	    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" , wrapper)
                	    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" , wrapper)
                	    
                	    for(var birthday of Object.keys(this.active_birthdays)) {
                		for(var person of this.active_birthdays[birthday]) {
                				
                		    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 > ";
                		    				
                		}
                	    }
                
                	    return wrapper;
                
                	}
                	
                	this.loaded = true;
                
                	    }
                    },
                
                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:

                  	    // create table
                  	    var table = this.createEl("table", "birthday-table", "table" , wrapper)
                  	    
                  	    // create header
                  	    var tHeader = this.createEl('thead', "birthday-thead", "thead" , table)
                  	    
                  	    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 = " ";
                  	        
                  	    // Create TFOOT section -- currently used for debugging only
                  	    var tFooter = this.createEl('tfoot', "birthday-tfood", "tfoot" , table)
                  	    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 = " ";
                  	    }
                  
                  	    // create TBODY section with day names
                  	    var tBody = this.createEl('tBody', "birthday-tbody", "tbody" , table)
                  	    
                  	    for(var birthday of Object.keys(this.active_birthdays)) {
                  		for(var person of this.active_birthdays[birthday]) {
                  				
                  		    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 + "    < span class=\"age-span\" > " + person.age + " < /span > ";
                  		    				
                  		}
                  	    }
                  

                  what the html fragments with the < and space, they don’t work if there is a space there, need it for the forum, but won’t actually work

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

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

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

                      headerTH.innerHTML = " ";
                    

                    all things are empty when created, so don’t need this

                    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 @sdetweil
                      last edited by

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

                        else {
                        footerTD.innerHTML = " ";
                        }
                      

                      don’t need this

                      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
                        last edited by sdetweil

                        fixed createEl routine

                        createEl : function (type, id, className, parent){
                        
                        	var el= document.createElement(type)
                        	if(id)
                        		el.id=id
                        	if(className)
                        		el.className=className
                        	if(parent)
                        		parent.appendChild(el)
                        	return el
                        
                        },
                        

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 23
                        • 24
                        • 25
                        • 26
                        • 27
                        • 31
                        • 32
                        • 25 / 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