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

注意它是如何复制数据的，就好像它已经迭代了两次一样。现在我不认为它已经迭代了两次，因为我改变了$ .each方法来包含它：

$( 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。

JQuery JSON数据向表追加两次

1 个答案: