1

私は周りをよく検索しましたが、スタックオーバーフローの何も私が抱えている問題と一致していないようです。

サーバーからJSONの形式で情報を収集するJQueryajaxリクエストがあります。このデータの構造は次のとおりです。

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

2回繰り返したように、データがどのように複製されたかに注目してください。$ .eachメソッドを変更してこれを含めたので、2回繰り返されたとは思いません。

$( 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
});

しかし、コンソールには、予想どおり2ラウンドではなく1ラウンドのデータしか表示されませんでした。私が2つのテーブルを作成したと思わないように、ここにあるのはページ上の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>

これはかなり長い間私を困惑させてきました、そしてどんな助けでも非常にありがたいです。皆さん、ありがとうございました！

4

1 に答える 1

4

あなたのテーブルは2つの<tbody>タグでブラウザにレンダリングされていると思います。この理由は、の
<tr class="nothing"><td colspan="5">No tickets, good work!</td></tr>外にあるタグです<tbody>。

したがって、...$('div#tickets table tbody').append(... は2つのtbodyのそれぞれにテーブル行を追加します。

あなたは試すことができます：
console.log($('div#tickets table tbody').length)そして私は結果が「2」になると信じています。これを防ぐために、これを「チケットなし、お疲れ様でした！」tbody内の行、または $('div#tickets table tbody:eq(0)セレクターを使用して最初のtbodyのみを取得します。

于 2013-03-27T09:22:12.647 に答える