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.
    • 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
                      • S Offline
                        sdetweil
                        last edited by

                        new getDom(), without header or footer

                        	getDom: function() {
                        		var wrapper = this.createEl("div",null,null,null);
                        
                        		if(Object.keys(this.active_birthdays).length>0){
                        
                        			// create your table and header here
                        		    // 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",null, tBody);
                        
                        					    var bodyTDimage = this.createEl("td","birthday-td-image", null, bodyTR );
                        
                        					    	bodyTDimage.appendChild(document.createTextNode(birthday));
                        
                        					    var bodyTD = this.createEl("td", "birthday-td-body", null, bodyTR );
                        
                        							bodyTD.appendChild(document.createTextNode(person.name));
                        			
                        					     
                        						var ageTD = this.createEl("td","birthday-td-age", null, bodyTR  );
                        			 
                        					    	ageTD.appendChild(document.createTextNode(person.age)); 
                        
                        				}
                        			}
                        		}
                        // create your table footer here	
                        
                        		// pass the created content back to MM to add to DOM.
                        		return wrapper;
                        	}
                        

                        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