Javascript Array loses content when passed to function
Oops, I guess I was wrong. As @MDeSchaepmeester and @charlietfl indicate it should work and I can see now. The problem is this is not a rendering of the DataTable.
Any suggestions as to why it won't load into DataTables without error is appreciated!
Here's all the code as requested:
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
});
};
I am losing values inside the array in the code below as soon as I pass it to the function. I am using jQuery DataTables in my page. However, I have no syntax error, just the code crashing due to an empty array.
MAIN CODE:
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:
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
});
};
+3
source to share
1 answer
Code like this:
console.log(tblDataOpen); // <=== SHOWS THE ARRAY AS EXPECTED
renderPartnerTicketsList(tblDataOpen, 'open');
works. Indeed. Millions of people use it billions of times every day.
So the problem must be elsewhere. To debug the problem, you need to set a breakpoint in the function renderPartnerTicketsList()
and then the browser will stop, look at the call stack. I am assuming it is being renderPartnerTicketsList()
called from elsewhere.
0
source to share