<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Getting API data in table]]></title><description><![CDATA[<p dir="auto">I get data through an API, lets say:</p>
<pre><code>alarm: "0"
d0neerslag: "4"
d0tmax: "12"
d0tmin: "5"
....
</code></pre>
<p dir="auto">Currently I’m making a table, row and cells in the getDOM function to display the data:</p>
<pre><code>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;	
</code></pre>
<p dir="auto">This is a lot of type-work. I was thinking isn’t there a better way?<br />
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?</p>
<p dir="auto">(still trying to learn JS, but not afraid to ask) :smiling_face:</p>
]]></description><link>https://forum.magicmirror.builders/topic/10130/getting-api-data-in-table</link><generator>RSS for Node</generator><lastBuildDate>Tue, 18 Aug 2026 13:59:08 GMT</lastBuildDate><atom:link href="https://forum.magicmirror.builders/topic/10130.rss" rel="self" type="application/rss+xml"/><pubDate>Tue, 26 Mar 2019 18:49:34 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to Getting API data in table on Thu, 22 Aug 2019 14:20:05 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/sdetweil" aria-label="Profile: sdetweil">@<bdi>sdetweil</bdi></a> hi did you make a table then? where did you put your java code? i.e. which file?</p>
]]></description><link>https://forum.magicmirror.builders/post/60323</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/60323</guid><dc:creator><![CDATA[bachoo786]]></dc:creator><pubDate>Thu, 22 Aug 2019 14:20:05 GMT</pubDate></item><item><title><![CDATA[Reply to Getting API data in table on Wed, 27 Mar 2019 13:04:17 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/htilburgs" aria-label="Profile: htilburgs">@<bdi>htilburgs</bdi></a> by using a routine to do the element create-&gt;parent.append() you reuse one copy of the code, instead of the tedious copy/paste/edit/fix cycle…</p>
<p dir="auto">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</p>
]]></description><link>https://forum.magicmirror.builders/post/54961</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/54961</guid><dc:creator><![CDATA[sdetweil]]></dc:creator><pubDate>Wed, 27 Mar 2019 13:04:17 GMT</pubDate></item><item><title><![CDATA[Reply to Getting API data in table on Wed, 27 Mar 2019 06:02:14 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/sdetweil" aria-label="Profile: sdetweil">@<bdi>sdetweil</bdi></a> Thank you for the reply. I’m going to play with it and see which kind suited me the best.</p>
]]></description><link>https://forum.magicmirror.builders/post/54949</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/54949</guid><dc:creator><![CDATA[htilburgs]]></dc:creator><pubDate>Wed, 27 Mar 2019 06:02:14 GMT</pubDate></item><item><title><![CDATA[Reply to Getting API data in table on Wed, 27 Mar 2019 02:44:55 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/htilburgs" aria-label="Profile: htilburgs">@<bdi>htilburgs</bdi></a>  well, thinking something like this , same work, less actual code, more readable</p>
<pre><code>// 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
}  
</code></pre>
]]></description><link>https://forum.magicmirror.builders/post/54942</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/54942</guid><dc:creator><![CDATA[sdetweil]]></dc:creator><pubDate>Wed, 27 Mar 2019 02:44:55 GMT</pubDate></item><item><title><![CDATA[Reply to Getting API data in table on Tue, 26 Mar 2019 19:10:30 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/sdetweil" aria-label="Profile: sdetweil">@<bdi>sdetweil</bdi></a>, so what you’re saying is continu as I’m started with table, row, cells manual?</p>
<p dir="auto">I was hoping something in the next style would work.</p>
<pre><code>   for (i = 0; i &lt; this.MWB.length; i++) {
	var MWB = this.MWB[i];
</code></pre>
<p dir="auto">and combining this with the text of the result. But I can’t figure it out.</p>
]]></description><link>https://forum.magicmirror.builders/post/54939</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/54939</guid><dc:creator><![CDATA[htilburgs]]></dc:creator><pubDate>Tue, 26 Mar 2019 19:10:30 GMT</pubDate></item><item><title><![CDATA[Reply to Getting API data in table on Tue, 26 Mar 2019 19:02:54 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/htilburgs" aria-label="Profile: htilburgs">@<bdi>htilburgs</bdi></a> you could make a routine to do each element.</p>
<p dir="auto">Using  replace or regular expression is just as much work in my opinion</p>
]]></description><link>https://forum.magicmirror.builders/post/54938</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/54938</guid><dc:creator><![CDATA[sdetweil]]></dc:creator><pubDate>Tue, 26 Mar 2019 19:02:54 GMT</pubDate></item></channel></rss>