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.9k 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 @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
              • PerlchampP Offline
                Perlchamp
                last edited by Perlchamp

                the classes are not addressed :
                image
                … without header and footer.
                why the classes are null ?

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

                  @Perlchamp sorry, typo
                  className with upper case

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

                  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

                    i set the classes in uppercase, allthough in the css-file. but the classes are not adressed.
                    by the way. maybe there is a problem with TWO cells in a row, because the daynumbers are OVER the names. if you look at the picture i send before (not the last post), than you can see, that the daynumbers are in ONE row with the names …

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

                      @Perlchamp well, part of the problem is the ID of the cells is the same for each row… removing id and class (which I don’t have)
                      works

                      cells don’t NEED ids… but if u wanted, you would have to create a counter to append each loop to make the ids unique

                      new createEl which does text value too

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

                      and table header

                      	createTableHeader: function(parent, className, columnlabels){
                      
                      		var header = document.createElement("tr")
                      		for(columnName of columnlabels){
                      			this.createEl("th",null,className, header,columnName)
                      		}
                      		parent.appendChild(header)
                      		return header
                      	},
                      

                      getdom()

                      	// this is the major worker of the module, it provides the displayable content for this module
                      	getDom: function() {
                      		var wrapper = this.createEl("div",null,null,null);
                      
                      		if(Object.keys(this.active_birthdays).length>0){
                      
                      			// create your table  here
                      			var table = this.createEl("table", "birthday-table", null, wrapper );
                      
                      			// table header here, array of column names
                      			var table_header=this.createTableHeader(table, null, ["date","Name","age"])
                      
                      		    // create TBODY section with day names
                      		    var tBody = this.createEl("tBody", "birthday-tbody", null, table );	
                      
                      			for(var birthday of Object.keys(this.active_birthdays)){
                      				for(var person of this.active_birthdays[birthday]){
                      			
                      				    var bodyTR = this.createEl("tr", null,null, tBody);
                      
                      					    var bodyTDimage = this.createEl("td",null, null, bodyTR , birthday );
                      
                      					    var bodyTD = this.createEl("td", null, null, bodyTR , person.name);
                      					     
                      						var ageTD = this.createEl("td",null, null, bodyTR  ,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
                      • PerlchampP Offline
                        Perlchamp
                        last edited by

                        ok, i’ve seen, the header function … uff, all is placed right (code).
                        i don’t see the day of birth. the first cell is still the problem :-(

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