JQuery JSON数据附加两次到表

Question

我有一个很好的搜索，堆栈溢出似乎无法匹配我遇到的问题。

我有一个JQuery ajax请求从我的服务器收集JSON形式的信息。该数据具有以下结构：

numreturned: 6 
result: "success" 
startnumber: 0 
tickets: {ticket:[,…]} 
ticket: [,…] 
0: {id:1504, tid:932632, deptid:4, userid:0, name:customer,…} 
1: {id:1503, tid:553074, deptid:5, userid:0, name:customer,…} 
2: {id:1502, tid:106861, deptid:4, userid:0, name:customer,…} 
3: {id:1500, tid:132776, deptid:4, userid:0, name:sales,…} 
4: {id:1499, tid:413148, deptid:4, userid:0, name:sales,…} 
5: {id:1498, tid:788415, deptid:4, userid:0, name:sales,…} 
totalresults: "6" 

这只是从Chrome开发工具中复制出来给你一个想法。这项工作的主力是由这一点JavaScript实现：

$('#click_tickets').click(
    function(){ 
     link_make_active('#click_tickets', '#tickets'); 

     $.get('api_tickets.php?get=tickets', function(data) { 

      var data = $.parseJSON(data); 

      if(data.tickets.ticket.length === 0) { 
       $('div#tickets tr.nothing').slideDown(); 
      } else { 

       $('div#tickets tbody').html(''); 

       $(data.tickets.ticket).each(function(i,d){ 
        $('div#tickets table tbody').append(
         '<tr><td>' + '</td>' + 
         '<td>' + d.priority + '</td>' + 
         '<td>' + d.date + '</td>' + 
         '<td>' + d.name +'</td>' + 
         '<td>' + d.subject +'</td>' + 
         '<td>' + '</td></tr>' 
        ); 
       }); 

      } 

     }); 
    } 
); 

function link_make_active(link, dash) { 
    $('ul.nav li').removeClass('active'); 
    $(link).parent("li").addClass("active"); 
    $('.dashboard').slideUp(); 
    $(dash).slideDown(); 
} 

现在的问题是，结果我得到时的JavaScript运行是这样的：

Priority Time Opened Client Subject 
Medium 2013-03-26 18:12:04 OVH OVH: Renewal of your services -  
Medium 2013-03-26 18:02:05 Twitter Tweets from 6 others  
Medium 2013-03-25 19:18:05 OVH OVH: Renewal of your services -  
Medium 2013-03-23 17:03:05 sales@.com Your thawte SSL123 Certificate Is Approved 
Medium 2013-03-23 16:45:04 sales@.com SSL123 Certificate Approval 
Medium 2013-03-23 16:44:04 sales@.com Order Information Request for 
Medium 2013-03-26 18:12:04 OVH OVH: Renewal of your services -  
Medium 2013-03-26 18:02:05 Twitter Tweets from 6 others  
Medium 2013-03-25 19:18:05 OVH OVH: Renewal of your services -  
Medium 2013-03-23 17:03:05 sales@.com Your thawte SSL123 Certificate Is Approved 
Medium 2013-03-23 16:45:04 sales@.com SSL123 Certificate Approval 
Medium 2013-03-23 16:44:04 sales@.com Order Information Request for 

注意它是如何复制的数据就好像它已经遍历了两遍。现在，我不认为我改变了$。每个方法包括这个已经重复了两次：

$(data.tickets.ticket).each(function(i,d){ 
    $('div#tickets table tbody').append(
     '<tr><td>' + '</td>' + 
     '<td>' + d.priority + '</td>' + 
     '<td>' + d.date + '</td>' + 
     '<td>' + d.name +'</td>' + 
     '<td>' + d.subject +'</td>' + 
     '<td>' + '</td></tr>' 
    ); 
    console.log(d); // Added to output to console the individual ticket content on each iteration 
}); 

但控制台只显示了一个圆形的数据不是两个正如您所料。只是让你不去想，我创建了两个表或任何这里是页面上的HTML：

<!-- Tickets Dashboard --> 
<div class="dashboard" id="tickets"> 
    <h1>Ticket Dashboard</h1> 
    <table> 
     <thead> 
      <tr><th>Time Open</th><th>Priority</th><th>Time Opened</th><th>Client</th><th>Subject</th><th>Product</th></tr> 
     </thead> 
     <tbody></tbody> 
     <tr class="nothing"><td colspan="5">No tickets, good work!</td></tr> 
    </table> 
</div> 

这一直困扰着我很长一段时间了，任何帮助将是非常赞赏。谢谢你们！

Answer 1

我相信你的表是在你的浏览器中呈现两个<tbody>标签。这样做的原因是 的
<tr class="nothing"><td colspan="5">No tickets, good work!</td></tr>标签，你有<tbody>之外。

因此... $('div#tickets table tbody').append(... 在两个tbody的每一个中附加表格行。

你可以试试：
console.log($('div#tickets table tbody').length)，我相信结果将是“2”。 为了防止这种情况发生，请保留这张'没有门票，很好的工作！'排在tbody内或者使用 $('div#tickets table tbody:eq(0)选择器来获得第一个tbody。