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

Share Improve this question Follow edited Sep 19, 2017 at 7:25 mplungjan 179k2828 gold badges182182 silver badges240240 bronze badges asked Sep 19, 2017 at 6:47 M gowdaM gowda 20311 gold badge66 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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