Javascript table not populating in Loop & Merge | XM Community
Skip to main content

I have javascript code that creates a table. This is a question inside a Loop&Merge block. The table is only showing up for the first iteration of the loop, but its omitted for all further iterations. The javascript code that generates the table runs in its entirety. Does anyone know why this could be the case? Would be very grateful.

The html code is just:




Javascript is:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
var tasks = '${e://Field/tasks}';
var arrayString = '${e://Field/array}';
var startingSlice = parseInt('${lm://Field/2}');
var endingSlice = parseInt(startingSlice)+20;
var array = arrayString.split(","); 
var randomArray = array.slice(startingSlice, endingSlice); 
console.log('starting slice is', startingSlice, 'ending slice is', endingSlice, 'slice for this table is ', randomArray);
let theTable = e
{ empty:"Option 1" , "Value": "?", "Number 1": randomArrayr0], "Number 2": randomArrayr5], "Number 3": randomArrayr10], "Number 4": randomArrayr15]},
{ empty:"Option 2" , "Value": "?", "Number 1": randomArrayA1], "Number 2": randomArrayA6], "Number 3": randomArrayA11], "Number 4": randomArrayA16]},
{ empty:"Option 3" , "Value": "?", "Number 1": randomArrayA2], "Number 2": randomArrayA7], "Number 3": randomArrayA12], "Number 4": randomArrayA17]},
{ empty:"Option 4" , "Value": "?", "Number 1": randomArraym3], "Number 2": randomArraym8], "Number 3": randomArraym13], "Number 4": randomArraym18]},
{ empty:"Option 5" , "Value": "?", "Number 1": randomArrayo4], "Number 2": randomArrayo9], "Number 3": randomArrayo14], "Number 4": randomArrayo19]}
];

function generateTableHead(table) {
let thead = table.createTHead();
let row = thead.insertRow();
let th = document.createElement("th");
row.appendChild(th);
for (let key of data.slice(1)) {
let th = document.createElement("th");
if (key === "Value") {th.style.color = 'blue'} 
let text = document.createTextNode(key);
th.appendChild(text);
row.appendChild(th);
}
}

function generateTable(table, data) {
for (let element of data) {
let row = table.insertRow();
console.log('GENERANDO TABLA')
for (key in element) {
let cell = row.insertCell();
if (key === "Value") {cell.style.color = 'blue'} 
let text = document.createTextNode(elementekey]);
cell.appendChild(text);
}
}
}

let table = document.querySelector("table");
let data = Object.keys(theTable(0]);
generateTable(table, theTable);
generateTableHead(table, data);
});

Update: it is showing up on alternating loops


Leave a Reply