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

Getting API data in table

Scheduled Pinned Locked Moved Development
7 Posts 3 Posters 2.0k 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.
  • S Offline
    sdetweil @htilburgs
    last edited by Mar 26, 2019, 7:02 PM

    @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
    • H Offline
      htilburgs
      last edited by Mar 26, 2019, 7:10 PM

      @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 Mar 26, 2019, 8:31 PM Reply Quote 0
      • S Offline
        sdetweil @htilburgs
        last edited by sdetweil Mar 27, 2019, 2:44 AM Mar 26, 2019, 8:31 PM

        @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

        H 1 Reply Last reply Mar 27, 2019, 6:02 AM Reply Quote 0
        • H Offline
          htilburgs @sdetweil
          last edited by Mar 27, 2019, 6:02 AM

          @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 Mar 27, 2019, 1:04 PM Reply Quote 0
          • S Offline
            sdetweil @htilburgs
            last edited by Mar 27, 2019, 1:04 PM

            @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 Aug 22, 2019, 2:20 PM Reply Quote 0
            • B Offline
              bachoo786 @sdetweil
              last edited by Aug 22, 2019, 2:20 PM

              @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