Как отобразить данные JSON с сервера node.js на HTML-странице (клиент) с помощью AJAX (метод Get)?

Question

Я использую сервер узла js, с этого URL: http://localhost:5000/listproducts У меня есть следующие данные:

[{"Id": 1, "Имя": "Новый продукт", "Описание ":" P1 desc "," Количество ": 1}, {" Id ": 2," Имя ":" Product2 "," Описание ":" p2 desc "," Количество ": 7}]

Я хочу отобразить данные на html-странице, используя ajax.

Я пробовал это на моей html-странице:

$('#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;
    });

, но когда я пытаюсь это сделать, ничего не происходит, и html-страница консоли не появляетсяпоказать любые ошибки:

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>

Я ожидаю, что на выходе будет таблица с данными о продуктах

Answer 1

Вы можете попробовать вот так:

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;
});

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>