如何使用ajax（获取方法）在html页面（客户端）中显示来自node.js服务器的json数据？

Question

I am using node js server ,from this url : http://localhost:5000/listproducts I have the following data:

[{"Id":1,"Name":"New Product","Description":"P1 desc","Quantity":1},{"Id":2,"Name":"Product2","Description":"p2 desc","Quantity":7}]

i want to display the data in html page using ajax .

I have tried this in my html page :

$('#display').click(function() {
      $.ajax({
          type: 'GET',
          url: 'http://localhost:5000/listproducts',
          dataType:"json", //to parse string into JSON object,
          success: function(data){ 
              if(data){
                  var len = data.length;
                  var txt = "";
                  if(len > 0){
                      for(var i=0;i<len;i++){
                          if(data[i].Name && data[i].Description){
                              txt += "<tr><td>"+data[i].Name+"</td><td>"+data[i].Description+"</td><td>"+data[i].Quantity+"</td></tr>";
                          }
                      }
                      if(txt != ""){
                          $("#table").append(txt).removeClass("hidden");
                      }
                  }
              }
          },
          error: function(jqXHR, textStatus, errorThrown){
              alert('error: ' + textStatus + ': ' + errorThrown);
          }
      });
      return false;
    });

but when i try it nothing happen and html console page doesnot show any errors:

html :

<button id="display">Display Products</button>
    <table id="table" class="hidden" style="display:none;">
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Description</th>
            <th>Image</th> 
        </tr>
    </table>

i expect the output to be table holding the data of the products

Answer 1

You can try like this:

Javascript:

$('#display').click(function() {
      $.ajax({
          type: 'GET',
          url: 'http://localhost:5000/listproducts',
          dataType:"json", //to parse string into JSON object,
          success: function(data) { 
              if(data) {
                for(let i=0;i<data.length;i++) {
                    $('#table tbody').append("<tr><td>"+data[i].Name+"</td><td>"+data[i].Description+"</td><td>"+data[i].Quantity+"</td></tr>");
                }
            }
          },
          error: function(jqXHR, textStatus, errorThrown){
              alert('error: ' + textStatus + ': ' + errorThrown);
          }
      });

      return false;
});

The HTML:

<button id="display">Display Products</button>
<table id="table" class="hidden" style="display:none;">
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Description</th>
            <th>Image</th> 
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>