title: How to create table with AJAX
body: <p>I have  three lists </p>
  
  <pre><code>Devices    =     (Mango, Apple, Orange)
  Lifetime    =     (100,200,100)
  Status =     (Yes, No, Yes)
  </code></pre>
  
  <p>These lists are grouped as a template</p>
  
  <pre><code>template = {
       'Device'   :  Devices,
       'Lifetime' :  Lifetime,
       'Status'   :  Status,
  }
  </code></pre>
  
  <p>I need to create a table for web interface in AJAX from the above template  displaying:</p>
  
  <pre><code>DEvices  Lifetime   Status
  Mango    100        Yes
  Apple    200        No
  Orange   100        Yes
  </code></pre>
  
  <p>How can this be done in html with script using AJAX?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="wrapper"&gt;
              %include navbar.tmpl ovVersion=ovVersion, roverMode=roverMode
  
              &lt;div id="page-wrapper"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-12"&gt;
                          &lt;h1 class="page-header"&gt;Wireless Sensor&lt;/h1&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;script&gt;
                      var n_dots = 1;
                      $( document ).ready(function() {
                          $.ajax({
                                  dataType: "json",
                                  url: "/wirelessSensor/dag",
                                  success: updateForData,
                                  error: errorOnAjax
                              });
  
                          function updateForData(json) {              
  
                           $("div").html("&lt;table&gt;&lt;tr&gt;&lt;th&gt;Devices&gt;&lt;/th&gt;&lt;th&gt;Lifelist&lt;/th&gt;&lt;th&gt;Status&lt;/th&gt;&lt;/tr&gt;");
                           $.each(json.devices, function( index, value ) {
                             $("div").append("&lt;tr&gt;&lt;td&gt;" + value + "&lt;/td&gt;&lt;td&gt;" + json.lifelist[index] + "&lt;td&gt;&lt;/td&gt;&lt;td&gt;" + json.status[index] + "&lt;/td&gt;&lt;/tr&gt;");
                               });
                           $("div").html("&lt;/table&gt;"); 
  
                       }
  
                      function errorOnAjax(jqxhr, status, errorstr) {
                          var errText = (errorstr == null)
                                  ? '' : ', error: ' + errorstr;
                          console.log('Ajax error: ' + status + errText);
                      }         
  
                  });
  
                  &lt;/script&gt;
  
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I tried doing like this. But guess I have issues in my syntax</p>