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.

    Getting API data in table

    Scheduled Pinned Locked Moved Development
    7 Posts 3 Posters 1.9k Views 3 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.
    • htilburgsH Offline
      htilburgs
      last edited by 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) :smiling_face:

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

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

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

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

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • htilburgsH Offline
          htilburgs
          last edited by

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

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

          S 1 Reply Last reply Reply Quote 0
          • S Offline
            sdetweil @htilburgs
            last edited by 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
            }  
            

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            htilburgsH 1 Reply Last reply Reply Quote 0
            • htilburgsH Offline
              htilburgs @sdetweil
              last edited by

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

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

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

                @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

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                B 1 Reply Last reply Reply Quote 0
                • B Offline
                  bachoo786 @sdetweil
                  last edited by

                  @sdetweil hi did you make a table then? where did you put your java code? i.e. which file?

                  1 Reply Last reply Reply Quote 0
                  • 1 / 1
                  • 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