Getting API data in table

htilburgs

I get data through an API, lets say:

alarm: "0"
d0neerslag: "4"
d0tmax: "12"
d0tmin: "5"
....

Currently I’m making a table, row and cells in the getDOM function to display the data:

var TemperatuurRow = document.createElement("tr");
TemperatuurRow.className = "temperatuur-row";
		
var TempTextCell = document.createElement("td");
TempTextCell.className = "small";
TempTextCell.innerHTML = "Neerslag";
TemperatuurRow.appendChild(TempTextCell);
table.appendChild(TemperatuurRow);
			
var TempDataCell = document.createElement("td");
TempDataCell.className = "small fas fa-thermometer-half";
TempDataCell.innerHTML = "  " + MWB.d0neerslag;
TemperatuurRow.appendChild(TempDataCell);
table.appendChild(TemperatuurRow);
...
return table;

This is a lot of type-work. I was thinking isn’t there a better way?
I was thinking of creating a table with the names and combine this with the results from the API. Can this be done? And how?

(still trying to learn JS, but not afraid to ask)

sdetweil

@htilburgs you could make a routine to do each element.

Using replace or regular expression is just as much work in my opinion

htilburgs

@sdetweil, so what you’re saying is continu as I’m started with table, row, cells manual?

I was hoping something in the next style would work.

   for (i = 0; i < this.MWB.length; i++) {
	var MWB = this.MWB[i];

and combining this with the text of the result. But I can’t figure it out.

sdetweil

@htilburgs well, thinking something like this , same work, less actual code, more readable

// create elements... take an object in as parms, makes it easier to understand
  // what is supplied vs not
  newElement: function(parms_object ){
  var e=null;    
  switch(parms_object.type){
     case 'table':        
        e=document.createElement('table');
     break;
     case 'row':
        e=document.createElement('tr');        
     break;
     case 'column':
        e=document.createElement('td');   
     break;
  }
  if(parms_object.classname !== undefined)
     e.className=parms_object.classname;
  if (parms_object.value !== undefined)     
     e.innerHTML = parms_object.value       
  if(parms_object.parent !== undefined)
     (parms_object.parent).appendChild(e)
  return e;
},

getDom: function(){
  var wrapper = document.createElement("div");
  var table = this.newElement({type:'table'}) // note here, just type specified, to test code above
  
  // repeat the rows/columns block as needed  maybe in a loop as well.. 
 
  // get the list of items in the object
  for(item_name of Object.keys(this.MBW)){  // i think this returns keys in position order, not alphabetical
    var row=this.newElement({type:"row",classname:"temperatuur-row",parent:table})  
    // add a column for the data item name
    this.newElement({parent:row, type:"column",classname:"small",value:item_name}) // parms in any order
    // get the data for the item
    let item_value= this.MBW[item_name]
    this.newElement({type:"column",classname:"small",value:item_value,parent:row})
  }
  wrapper.appendChild(table)
  return wrapper
}

htilburgs

@sdetweil Thank you for the reply. I’m going to play with it and see which kind suited me the best.

sdetweil

@htilburgs by using a routine to do the element create->parent.append() you reuse one copy of the code, instead of the tedious copy/paste/edit/fix cycle…

some people use div/span/span/span instead of table… this routine will work the same with two case statements added, so you can use div and span instead of tr/td