如何使用 jquery 将 json 数组中的数据转换为表格格式？答案

【问题标题】：How to get data from json array into table format using jquery?如何使用 jquery 将 json 数组中的数据转换为表格格式？
【发布时间】：2018-12-03 07:39:40
【问题描述】：

我想从 json 数组中将数据放入表中，我在控制台中有数据，请参见下文，但我没有将数据放入表中的表。

数据显示在控制台屏幕截图中

我尝试了什么：-

$.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)

                           }
                       }

【问题讨论】：

标签： javascript jquery json asp.net-mvc

【解决方案1】：

使用 $.each 而不是使用 for 循环。并尝试通过 d.ProductOptionAvailability 提取数据。如果它不起作用，请使用 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');

         }
       });

【讨论】：

【解决方案2】：

我敢打赌问题出在这一行

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

标签<t> 没有原生HTML 元素。我的意思是：

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

还有下面一行

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

应该是这样的：

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

或者如果你的意思是它是一个数组：

 data: [ fromdate, enddate, productoptionId ],

【讨论】：

是的，我解决了，实际上 json 字符串中有嵌套数组。