read csv-data and put it in an array

Perlchamp

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;

	    }
    },

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

sdetweil

@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

sdetweil

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

  else {
  footerTD.innerHTML = " ";
  }

don’t need this

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

},

sdetweil

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;
	}

Perlchamp

the classes are not addressed :

… without header and footer.
why the classes are null ?

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

	},

Perlchamp

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 …

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;
	}