• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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 408.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.
  • P Offline
    Perlchamp
    last edited by May 3, 2020, 12:52 AM

    wrapper in quotes , too ?

    S 1 Reply Last reply May 3, 2020, 12:55 AM Reply Quote 0
    • S Offline
      sdetweil @sdetweil
      last edited by sdetweil May 3, 2020, 12:54 AM May 3, 2020, 12:52 AM

      @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 May 3, 2020, 12:55 AM

        @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
        • P Offline
          Perlchamp
          last edited by May 3, 2020, 1:02 AM

          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 May 3, 2020, 1:04 AM Reply Quote 0
          • S Offline
            sdetweil @Perlchamp
            last edited by sdetweil May 3, 2020, 1:07 AM May 3, 2020, 1:04 AM

            @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
            • P Offline
              Perlchamp
              last edited by May 3, 2020, 1:14 AM

              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 May 3, 2020, 1:17 AM Reply Quote 0
              • S Offline
                sdetweil @Perlchamp
                last edited by sdetweil May 3, 2020, 1:20 AM May 3, 2020, 1:17 AM

                @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 May 3, 2020, 1:21 AM Reply Quote 0
                • S Offline
                  sdetweil @sdetweil
                  last edited by May 3, 2020, 1:21 AM

                  @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 May 3, 2020, 1:21 AM

                    @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 May 3, 2020, 1:35 AM May 3, 2020, 1:30 AM

                      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
                      25 / 32
                      • First post
                        241/313
                        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