title: Realtime Update between Firebase and HTML Table
body: <p>Below code displays data from firebase into table </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
      &lt;/head&gt;
      &lt;body &gt;
      
      &lt;table style="width:100%;width:100%;" id="ex-table"&gt;
        &lt;tr id="tr"&gt;
          &lt;th&gt;Brand&lt;/th&gt;
         &lt;th&gt;Description&lt;/th&gt;
         &lt;th&gt;Item Code&lt;/th&gt;
         &lt;th&gt;Product Category&lt;/th&gt;
       &lt;/table&gt; 
      
      
      
      
      
      &lt;script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        // Initialize Firebase
        var config = {
          apiKey: "AIzaSyB5aqeEmEIB56IvRt4DL8RyOr0JX5Mw3HQ",
          authDomain: "tp-firebase-fd827.firebaseapp.com",
          databaseURL: "https://tp-firebase-fd827.firebaseio.com",
          projectId: "tp-firebase-fd827",
          storageBucket: "tp-firebase-fd827.appspot.com",
          messagingSenderId: "191127646247"
        };
        firebase.initializeApp(config);
        
         var database = firebase.database();
          database.ref().once('value', function(snapshot){
              if(snapshot.exists()){
                  var content = '';
                  snapshot.forEach(function(data){
                      var val = data.val();
                      content +='&lt;tr&gt;';
                      content += '&lt;td&gt;' + val.brand + '&lt;/td&gt;';
          content += '&lt;td&gt;' + val.description + '&lt;/td&gt;';
          content += '&lt;td&gt;' + val.item_code + '&lt;/td&gt;';
          content += '&lt;td&gt;' + val.prod_cat + '&lt;/td&gt;';
                      content += '&lt;/tr&gt;';
                  });
                  $('#ex-table').append(content);
              }
          });
        
        
       &lt;/script&gt;
       
       
       
       
      
      
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However it doesnt change automatically when i change data in my firebase. How can i achieve realtime update? Thats the only thing i need to do. TYSM for future help</p>