how to display json data from node.js server in html page(client) using ajax(Get Method)?

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

You've given us client-side code, but the error is originating from your server. It is only possible to help you with this if you show the server-side code which is handling this request. — Chris White
– Chris White, Commented Apr 24, 2019 at 16:52
now there isn't any server errors it was nothing , now it works well with no errors, but cant display the data coming from the url in my page despite that the link display the data in json format normally through this link . — Remoon Tharwat
– Remoon Tharwat, Commented Apr 24, 2019 at 17:00

Kunal Mukherjee · Accepted Answer · 2019-04-24 17:10:38Z

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>

Collectives™ on Stack Overflow

how to display json data from node.js server in html page(client) using ajax(Get Method)?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related