How to get data from json array into table format using jquery?

Question

I want to get data into table from json array i have data in console see below but I'm no table to get data into table.

Data is displaying in console screenshot

What I tried:-

$.ajax({
                       url:'/admin/checkavailability',
                       type:'POST',
                       data: { fromdate, enddate, productoptionId },
                       success: function (d) {
                           console.log(d);
                           if (d != null) {                        


                               for (var i = 0; i < d.length; i++) {
                                   tr = $('<tr/>');
                                   tr.append("<td>" + d[i].Date + "</td>");
                                   tr.append("<td>" + d[i].RetailPrice + "</td>");
                                   tr.append("<td>" + d[i].Price + "</td>");
                                   $('table#tblbindavailabledates').append(tr);
                               }

                               $('#myModal').modal('show');
                               //$(d)

                           }
                       }

Answer 1

Use $.each rather than using for loop. And try to extract data by d.ProductOptionAvailability. if it doesn't work then use d.ProductOptionAvailabilies.ProductOptionAvailability.

  $.ajax({
          url:'/admin/checkavailability',
          type:'POST',
           data: { fromdate, enddate, productoptionId },
           success: function (d) {
                 if (d != null) {   
                 var content = '' ;
                 $.each(d.ProductOptionAvailability, function (i, obj) { 
                 // if d.ProductOptionAvailability doesn't work then use d.ProductOptionAvailabilies.ProductOptionAvailability
                 var content = '<tr>' ;
                 content += '<td  >' + obj.Date +'</td><td  >' + obj.RetailPrice+'</td><td  >' + obj.Price+'</td><td  >' + obj.Quantity+'</td><td  >' + obj.Status+'</td>';
                 content += '</tr>';
                  $('table#tblbindavailabledates').append(content);
                 });
              }             
           $('#myModal').modal('show');

         }
       });

Answer 2

I bet the problem is in this line

$('t#tblbindavailabledates').append(tr);

There is no native HTML element by the tag <t> . mybe you meant to say:

$('table#tblbindavailabledates').append(tr);
// or simply
$('#tblbindavailabledates').append(tr);

Also, the following line

 ...
 data: { fromdate, enddate, productoptionId },
 ....

It should be something like:

data: { fromdate:fromdate, enddate: enddate, productoptionId: productoptionId },

or if you meant it to be an array:

 data: [ fromdate, enddate, productoptionId ],