MagicMirror² v2.7.0 is available! For more information about this release, check out this topic.

Getting API data in table



  • 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) ☺



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

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



  • @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.



  • @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
    }  
    


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



  • @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