CODEWITHSUNDEEP
jqueryajaxjson
onmylemon
onmylemon

Reputation: 734

JQuery JSON data appends twice to table

I have had a good search around and nothing on stack overflow seems to match the issue I am having.

I have a JQuery ajax request that collects information in the form of JSON from my server. This data has the following structure:

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"

This is just copied from Chrome dev tools to give you an idea. The brunt of the work is done by this bit of 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();
}

Now the problem is that the result I get when the javascript runs is this:

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 [email protected]  Your thawte SSL123 Certificate Is Approved  
Medium  2013-03-23 16:45:04 [email protected]  SSL123 Certificate Approval 
Medium  2013-03-23 16:44:04 [email protected]  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 [email protected]  Your thawte SSL123 Certificate Is Approved  
Medium  2013-03-23 16:45:04 [email protected]  SSL123 Certificate Approval 
Medium  2013-03-23 16:44:04 [email protected]  Order Information Request for

Notice how it has duplicated the data as if it has iterated through it twice. Now I do not think that it has iterated twice as I altered the $.each method to include this:

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

But the console only showed the one round of data not two as you might expect. Just so you don't go thinking I created two tables or anything here is the HTML on the page:

<!-- 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>

This has been perplexing me for quite some time now and any help would be VERY appreciated. Thank you all!

Upvotes: 1

Views: 1441

Answers (1)

bugartist
bugartist

Reputation: 139

I believe your table is rendered in your browser with two <tbody> tags. The reason for this is the
<tr class="nothing"><td colspan="5">No tickets, good work!</td></tr> tag, that you have outside the <tbody>.

So ... $('div#tickets table tbody').append(... appends the table row in each of the two tbodies.

You can try:
console.log($('div#tickets table tbody').length) and I believe the result will be '2'. In order to prevent this keep this 'No tickets, good work!' row inside the tbody or use $('div#tickets table tbody:eq(0) selector to get only the first tbody.

Upvotes: 4

Related Questions