Javascript 数组在传递给函数时会丢失内容

Question

哎呀，看来我错了。正如 @MDeSchaepmeester 和 @charlietfl 指出的那样，它应该有效，而且我现在看到它确实有效。问题是现在它没有渲染数据表。

欢迎任何关于为什么它不能毫无错误地加载到数据表中的建议!!

这是所要求的所有代码:

function PartnerListSupportTickets() {

    jQuery("#loader").show();

    var idOpen = 'tickets-tbl-open';
    var idOnHold = 'tickets-tbl-on-hold';
    var idDeferred = 'tickets-tbl-deferred';
    var idClosed = 'tickets-tbl-closed';
    var tblDataOpen = [];
    var tblDataOnHold = [];
    var tblDataDeferred = [];
    var tblDataClosed = [];
    var tblEmptyMsg = [];

    tblEmptyMsg.push({
        ticket: 'No tickets available for this category',
        postcode: '-',
        state: '-',
        customer: '-',
        status: '-',
        priority: '-',
        fault: '-',
        category: '-',
        author: '-',
        owner: '-',
        age: '-',
        lastupdate: '-'
    });

    var get_data_url = '/sma-php/gettickets.php?var=PARTCK&pid=' + sessionStorage.party_id;

    jQuery.getJSON( get_data_url, function( data ) {

        OpenNum = 0;
        OnHoldNum = 0;
        DeferredNum = 0;
        ClosedNum = 0;

        jQuery.each( data, function( i, d ) {

            var status = d.status;
            status = status.toLowerCase(); 

            if(status == 'closed') {
                var now = moment();
                var then = moment(d.create_date);
                d.days_age = now.diff(then, 'days');
            };

            switch(status) {
                case('open'):
                    OpenNum = OpenNum + 1;
                    tblDataOpen.push({
                        ticket: '<span id="' + d.ticket_id + '" class="ticket-id-class">' + d.short_title + '</span>',
                        postcode: d.postcode,
                        state: d.state,
                        customer: d.customer_name,
                        status: d.status,
                        priority: '<font color="' + d.color + '">' + d.priority + '</font>',
                        fault: d.fault_type,
                        category: d.category,
                        author: d.author_name,
                        owner: d.owner_name,
                        age: d.days_age,
                        lastupdate: d.update_date
                    });
                break;

                case('on hold'):
                    OnHoldNum = OnHoldNum + 1;
                    tblDataOnHold.push({
                        ticket: '<span id="' + d.ticket_id + '" class="ticket-id-class">' + d.short_title + '</span>',
                        postcode: d.postcode,
                        state: d.state,
                        customer: d.customer_name,
                        status: d.status,
                        priority: '<font color="' + d.color + '">' + d.priority + '</font>',
                        fault: d.fault_type,
                        category: d.category,
                        author: d.author_name,
                        owner: d.owner_name,
                        age: d.days_age,
                        lastupdate: d.update_date
                    });
                break;

                case('deferred'):
                    DeferredNum = DeferredNum + 1;
                    tblDataDeferred.push({
                        ticket: '<span id="' + d.ticket_id + '" class="ticket-id-class">' + d.short_title + '</span>',
                        postcode: d.postcode,
                        state: d.state,
                        customer: d.customer_name,
                        status: d.status,
                        priority: '<font color="' + d.color + '">' + d.priority + '</font>',
                        fault: d.fault_type,
                        category: d.category,
                        author: d.author_name,
                        owner: d.owner_name,
                        age: d.days_age,
                        lastupdate: d.update_date
                    });
                break;

                case('closed'):
                    ClosedNum = ClosedNum + 1;
                    tblDataClosed.push({
                        ticket: '<span id="' + d.ticket_id + '" class="ticket-id-class">' + d.short_title + '</span>',
                        postcode: d.postcode,
                        state: d.state,
                        customer: d.customer_name,
                        status: d.status,
                        priority: '<font color="' + d.color + '">' + d.priority + '</font>',
                        fault: d.fault_type,
                        category: d.category,
                        author: d.author_name,
                        owner: d.owner_name,
                        age: d.days_age,
                        lastupdate: d.update_date
                    });
                break;

                default:
            };

        });
        if(OpenNum > 0) {
            renderPartnerTicketsList(tblDataOpen, idOpen, true);
        } else {
            renderPartnerTicketsList(tblEmptyMsg, idOpen, true);
        };
        if(OnHoldNum > 0) {
            renderPartnerTicketsList(tblDataOnHold, idOnHold, true);
        } else {
            renderPartnerTicketsList(tblEmptyMsg, idOnHold, true);
        };
        if(DeferredNum > 0) {
            renderPartnerTicketsList(tblDataDeferred, idDeferred, true);
        } else {
            renderPartnerTicketsList(tblEmptyMsg, idDeferred, true);
        };
        if(ClosedNum > 0) {
            renderPartnerTicketsList(tblDataClosed, idClosed, true);
        } else {
            renderPartnerTicketsList(tblEmptyMsg, idClosed, true);
        };

        jQuery('a[href="#tab1c47048a"]').html('Open Tickets<span class="ticket-count">' + OpenNum + '</span>');
        jQuery('a[href="#tab281c055c"]').html('On Hold Tickets<span class="ticket-count">' + OnHoldNum + '</span>');
        jQuery('a[href="#tab328b0619"]').html('Deferred Tickets<span class="ticket-count">' + DeferredNum + '</span>');
        jQuery('a[href="#tab26b60552"]').html('Closed Tickets<span class="ticket-count">' + ClosedNum + '</span>');
    })
    .done(function() {
        jQuery("#loader").fadeOut("slow");
    })
    .fail(function(jqxhr, textStatus, error ) {
        var sysError = textStatus + ", " + error;
        showPopupMsg(errorClass, logoutFlag, "There was an error retrieving your Support Tickets List.<br/>Page wll not load from this point and you will be returned to our home page...<br/>Error: " + sysError); 
    });
};

function renderPartnerTicketsList(tblData, id, initLoad) {

    // Set up data for DataTable plugin

    if (!initLoad) {
        var tbl = jQuery('#' + id).DataTable();
        tbl.clear();
        tbl.rows.add(tblData);
        tbl.draw();
        return;
    };

    // Bind DataTable plugin
    var tblHtml = '<table cellpadding="0" cellspacing="0" border="0" class="display" id="' + id + '"><thead><tr>';
    tblHtml += '<th>Ticket</th>';
    tblHtml += '<th>Postcode</th>';
    tblHtml += '<th>State</th>';
    tblHtml += '<th>Customer</th>';
    tblHtml += '<th>Status</th>';
    tblHtml += '<th>Priority</th>';
    tblHtml += '<th>Fault</th>';
    tblHtml += '<th>Category</th>';
    tblHtml += '<th>Author</th>';
    tblHtml += '<th>Owner</th>';
    tblHtml += '<th>Age</th>';
    tblHtml += '<th>Last Update</th>';
    tblHtml += '</tr></thead><tbody></tbody></table>';

    jQuery('#' + id + '-container').html(tblHtml);

    jQuery('#' + id).dataTable({
        data: tblData,
        columns: [
          { data: "ticket" },
          { data: "postcode" },
          { data: "state" },
          { data: "customer" },
          { data: "status" },
          { data: "priority" },
          { data: "fault" },
          { data: "category" },
          { data: "author" },
          { data: "owner" },
          { data: "age" },
          { data: "lastupdate" }
        ],
        pageLength: 25,
        order: [12, 'desc'],
        "scrollCollapse": false,
        "jQueryUI": true,
        responsive: true
    });
};

<小时/>

一旦我将下面的代码传递给函数，我就会丢失数组内部的值。我在我的页面中使用 jQuery DataTables。不过，我没有语法错误，只是代码由于空数组而失败。

主要代码:

        jQuery.each( data, function( i, d ) {
            tblDataOpen.push({
                ticket: '<span id="' + d.ticket_id + '" class="ticket-id-class">' + d.short_title + '</span>',
                postcode: d.postcode,
                state: d.state,
                customer: d.customer_name
            });

console.log(tblDataOpen);   // <=== SHOWS THE ARRAY AS EXPECTED

            renderPartnerTicketsList(tblDataOpen, 'open');

功能:

    function renderPartnerTicketsList(tblData, id) {

console.log(tblData);   // <=== SHOWS AN EMPTY OBJECT

        var tblHtml = '<table cellpadding="0" cellspacing="0" border="0" class="display" id="' + id + '"><thead><tr>';
        tblHtml += '<th>Ticket</th>';
        tblHtml += '<th>Postcode</th>';
        tblHtml += '<th>State</th>';
        tblHtml += '<th>Customer</th>';
        tblHtml += '</tr></thead><tbody></tbody></table>';

        jQuery('#' + id + '-container').html(tblHtml);

    console.log(tblData);

        jQuery('#' + id).dataTable({    
            data: tblData,
            columns: [
              { data: "ticket" },
              { data: "postcode" },
              { data: "state" },
              { data: "customer" }
            ],
            pageLength: 25,
            order: [3, 'desc'],
            "scrollCollapse": false,
            "jQueryUI": true,
            responsive: true
        });
    };

Answer 1

代码如下:

console.log(tblDataOpen);   // <=== SHOWS THE ARRAY AS EXPECTED

        renderPartnerTicketsList(tblDataOpen, 'open');

有效。真的。数百万人每天使用它数十亿次。

这意味着问题一定出在其他地方。要调试该问题，您需要在函数 renderPartnerTicketsList() 中设置断点，然后浏览器停止，查看调用堆栈。我的猜测是 renderPartnerTicketsList() 也是从其他地方调用的。