title: Populate HTML table with Firebase Database data
body: <p>I am currently using Firebase to build a simple e-commerce website and have run into an issue. For the backend I am trying to populate an HTML table with Firebase database data.</p>
  
  <p>Currently, the data is appearing and I am able to populate the body of the table, but at the same time I want to create the headers for the table using the same snapshot. I have been able to do this however it repeats for every record in the database. So two records has two headers.</p>
  
  <p>How can I simply catch the index of the snapshot and only complete the <code>createHeaders</code> function once, or is there a more efficient way of doing this. Below is the <code>JS</code> I am using:</p>
  
  <pre><code>itemsRef.on('value', function(snapshot) {
      snapshot.forEach(function(child) {
          createHeaders(child.val());
          showItems(child.val(), child.key);
      });
  });
  
  function createHeaders(data) {
      var html = '';
      html += '&lt;tr&gt;';
      $.each(data, function(key, value) {
          html += '&lt;th&gt;' + key + '&lt;/th&gt;';
      });
      html += '&lt;th class="text-right"&gt;';
      html += '&lt;/tr&gt;';
  
      $("#tableHeaders").append(html);
  }
  
  function showItems(data, key) {
      var html = '';
      html += '&lt;tr&gt;';
      $.each(data, function(key, value) {
          html += '&lt;td&gt;' + value + '&lt;/td&gt;';
      });
      html += '&lt;td class="text-right"&gt;&lt;a href="/" class="btn btn-primary btn-sm"&gt;&lt;i class="fa fa-pencil"&gt;&lt;/i&gt; Edit&lt;/a&gt; &lt;a href="/" class="btn btn-danger btn-sm"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt; Delete&lt;/a&gt;&lt;/td&gt;';
      html += '&lt;/tr&gt;';
  
      $('#results').append(html);
  }
  </code></pre>