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。