title: Generate table with array
body: <p>I am creating a website that generates a dynamic table on load from an array. The array is</p>
  <pre><code>let products = 
  [
     [&quot;product1&quot;, &quot;Small Widget&quot;, &quot;159753&quot;, 33, 22],
     [&quot;product2&quot;, &quot;Medium Widget&quot;, &quot;258456&quot;, 55, 44],
     [&quot;product3&quot;, &quot;Large Widget&quot;, &quot;753951&quot;, 77, 88],
     [&quot;product4&quot;, &quot;Not a Widget&quot;, &quot;852654&quot;, 11, 2],
     [&quot;product5&quot;, &quot;Could be a Widget&quot;, &quot;654456&quot;, 99, 6],
     [&quot;product6&quot;, &quot;Ultimate Widget&quot;, &quot;321456&quot;, 111, 66],
     [&quot;product7&quot;, &quot;Jumbo Small Medium Widget&quot;, &quot;987456&quot;, 88, 11]
     
  ]
  </code></pre>
  <p>The array goes: Product Name, Product Description, Product ID, Price and Inventory Amount.
  I need to make the table output these fields into the order of Name, ID, Description, Price and Inventory Amount, then I need to make the price field have a $ in front of the price and check the inventory amount if it is less than 20. If the inventory is less than 20 I need to change the background color of the cell. Can someone help me figure out how exactly I need to go about doing this? Here is my js file currently which only generates the table but none of the formatting I need.</p>
  <pre><code>let products = 
  [
     [&quot;product1&quot;, &quot;Small Widget&quot;, &quot;159753&quot;, 33, 22],
     [&quot;product2&quot;, &quot;Medium Widget&quot;, &quot;258456&quot;, 55, 44],
     [&quot;product3&quot;, &quot;Large Widget&quot;, &quot;753951&quot;, 77, 88],
     [&quot;product4&quot;, &quot;Not a Widget&quot;, &quot;852654&quot;, 11, 2],
     [&quot;product5&quot;, &quot;Could be a Widget&quot;, &quot;654456&quot;, 99, 6],
     [&quot;product6&quot;, &quot;Ultimate Widget&quot;, &quot;321456&quot;, 111, 66],
     [&quot;product7&quot;, &quot;Jumbo Small Medium Widget&quot;, &quot;987456&quot;, 88, 11]
     
  ]
  
  //first create the table
  function generateTableHead(table, data) {
      let thead = table.createTHead();
      let row = thead.insertRow();
      for (let key of data) {
          let th = document.createElement(&quot;th&quot;);
          let text = document.createTextNode();
          th.appendChild(text);
          row.appendChild(th);
      }
  }
  
  function generateTable(table, data) {
      for (let element of data) {
          let row = table.insertRow();
          for (key in element) {
              let cell = row.insertCell();
              let text = document.createTextNode(element[key]);
              cell.appendChild(text);
          }
      }
  }
  let table = document.querySelector(&quot;table&quot;);
  let data = Object.keys(products[0]);
  generateTable(table, products);
  generateTableHead(table, data);
  </code></pre>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
  &lt;title&gt;The Sunglass Emporium &lt;/title&gt;
     &lt;meta charset=&quot;utf-8&quot; /&gt;
  
      &lt;link href=&quot;styles/styles.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
      &lt;link href=&quot;styles/reset.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
      
      &lt;link rel=&quot;icon&quot; href=&quot;images/iconPic.png&quot;&gt;
      
  &lt;/head&gt;
  
      &lt;header&gt;
      &lt;a href=&quot;index.html&quot;&gt;&lt;img class=&quot;topImg&quot; src=&quot;images/headerPic.png&quot; alt=&quot;MUSC&quot;/&gt;&lt;/a&gt;
      &lt;a href=&quot;index.html&quot;&gt;&lt;img class=&quot;topImg2&quot; src=&quot;images/headerPic2.png&quot; alt=&quot;MUSC&quot;/&gt;&lt;/a&gt;
      &lt;/header&gt;
      &lt;h1 class=&quot;titleH1&quot;&gt; The Sunglass Emporium &lt;/h1&gt;
      &lt;nav&gt;
          &lt;ul class=&quot;topnav1&quot;&gt;
          &lt;li&gt;&lt;a class=&quot;topnav2&quot; href=&quot;productList.html&quot; &gt;Product List&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class=&quot;topnav2&quot; href=&quot;productInfo.html&quot; &gt;Product Info&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class=&quot;topnav2&quot; href=&quot;productOrder.html&quot; &gt;Product Order&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  
  
  
  &lt;body&gt;
      &lt;table id=&quot;test&quot;&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  
  
  
  &lt;footer&gt;
  
  &lt;/footer&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>Can someone please help point me in the right direction? I have no idea what to change to make the table work correctly. I want to strictly use regular javascript.</p>