I am able to show the data returned from the ajax call as an alert, however I would like to show it in a table format using ejs.

Can someone help?

AJAX Call

$('#submit').on('click', function() {
  $.ajax({
    url: '/render',
    type: 'get',
    dataType: 'json',
    success: function(data) {

      for (var i = 0; i < data.length; i++) {
        alert(data[i].item);
      }
    }
  });
});

HTML

<div class="container">

  <div class="row">
    <div class="col-md-4">
      <label style="margin-left: 20px;">Shopping item</label>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      <label>Quantity</label>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">
      <input type="text" id="item" name="item" />&emsp;&emsp;&emsp;&emsp;
      <input type="text" id="quan" name="quan" />&emsp;&emsp;&emsp;&emsp;
      <input type="submit" id="submit" value="Add item" style="background-color: #a3a3c2; color:white; width:170px;" />
    </div>
  </div>

  <div class="row">
    <div class="col-md-8">
      <table>
        <thead>
          <th>Item</th>
          <th>Quantity</th>
        </thead>
        <tbody id="tbody">

        </tbody>
      </table>
    </div>
  </div>
  </form>

I am able to show the data returned from the ajax call as an alert, however I would like to show it in a table format using ejs.

Can someone help?

AJAX Call

$('#submit').on('click', function() {
  $.ajax({
    url: '/render',
    type: 'get',
    dataType: 'json',
    success: function(data) {

      for (var i = 0; i < data.length; i++) {
        alert(data[i].item);
      }
    }
  });
});

HTML

<div class="container">

  <div class="row">
    <div class="col-md-4">
      <label style="margin-left: 20px;">Shopping item</label>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      <label>Quantity</label>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">
      <input type="text" id="item" name="item" />&emsp;&emsp;&emsp;&emsp;
      <input type="text" id="quan" name="quan" />&emsp;&emsp;&emsp;&emsp;
      <input type="submit" id="submit" value="Add item" style="background-color: #a3a3c2; color:white; width:170px;" />
    </div>
  </div>

  <div class="row">
    <div class="col-md-8">
      <table>
        <thead>
          <th>Item</th>
          <th>Quantity</th>
        </thead>
        <tbody id="tbody">

        </tbody>
      </table>
    </div>
  </div>
  </form>

• javascript
• html
• css

2 Answers 2

try this

$('#submit').on('click',function() {
    $.ajax({
        url: '/render',
        type: 'get',
        dataType: 'json',
        success: function(data) {

           for(var i=0;i<data.length;i++)
           {
             var Html="<tr>
                <td>"+data[i].item+"</td>
                <td>"+data[i].Quantity+"</td>
            </tr>";
            $('#tbody').append(Html);

           }
        }
        });
    });

I'm not entirely sure what you are trying to achieve. But if you want to use ejs, then you should create an ejs template where you can pass the data.

Get your data and call the template with it;

$('#submit').on('click',function() {
    $.ajax({
        url: 'data.json',
        type: 'get',
        dataType: 'json',
        success: function(data) {

           var result = new EJS({url: 'productstemplate.ejs'}).render({products:data}); 
           document.getElementById('product_list').innerHTML = result
        }
        });
    });

I made a working sample of an ajax request, that uses an ejs to render in this plunkr sample, maybe this helps you out