Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Javascript create table from data

tomschuette
Topic Author
Offline
New Member

More

4 years 2 months ago #229880 by tomschuette

Javascript create table from data was created by tomschuette

Please help us help you and fill where relevant:
Your LimeSurvey version: Version 3.27.19+210928
Own server or LimeSurvey hosting:
Survey theme/template: fruity
==================

Hi everyone! I have a question regarding a little javascript coding I am trying to do. The following code works almost as intended, the only thing I cannot wrap my head around is that if I change the variable "myVersion" to "2" instead of "1", the column "Option" displays "undefined" whilst setting "myVersion" to "1" works just fine.

I am an absolute beginner in Javascript, so I am grateful for any tips and tricks on how to optimize my code.

Thanks in advance!

Code:

Code:

<table id="dce_table">
</table>
<script>
     function createDCE() {
                            
        var alternatives = ["Car","Bike","Train"];
        var myVERSION = "2";
        
        
        var myData = [
              { "Version":"1","Task":"1","Concept":"1","Att1":"Banane","Att2":"5€","Att3":"27,56","Att4":"$$$","Att5":"50°C"},
            { "Version":"1","Task":"1","Concept":"2","Att1":"Karotte","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
              { "Version":"1","Task":"1","Concept":"3","Att1":"Banane + Karotte","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
            { "Version":"2","Task":"1","Concept":"1","Att1":"Banane","Att2":"5€","Att3":"27,56","Att4":"$$$","Att5":"50°C"},
            { "Version":"2","Task":"1","Concept":"2","Att1":"Karotte","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
              { "Version":"2","Task":"1","Concept":"3","Att1":"Banane + Karotte","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"}

        ]

        var col = [];
        col.push("Option");
        for (var key in myData[0]) {
            if (key != "Version" && key != "Task" && key != "Concept") {
                col.push(key);
                }
        }
          col.push("Buttons here");


        var table = document.createElement("table");

        var tr = table.insertRow(-1);

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        for (var i = 0; i < myData.length; i++) {

            if (myData[i]["Version"] === myVERSION) {
              
              tr = table.insertRow(-1);
              
              for (var j = 0; j < col.length; j++) {
                      
                      if (j == 0) {
                        var createLabel = tr.insertCell(-1);
                        createLabel.innerHTML = alternatives[i]; // This is what doesn't seem to work anymore when "myVersion" is anything but "1"...
                          
                      }
                      
                      else {
                          var tabCell = tr.insertCell(-1);
                          tabCell.innerHTML = myData[i][col[j]];
                      }
              }
            }
        }
        
        var divContainer = document.getElementById("dce_table");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
        }

    createDCE();
    
    
</script>

==================
(Write here your question/remark)

Please Log in to join the conversation.

Joffm
Offline
LimeSurvey Community Team

More

4 years 2 months ago #229882 by Joffm

Replied by Joffm on topic Javascript create table from data

There is an error in your loop

for (var i = 0; i < myData.length; i++) {
if (myData["Version"] === myVERSION) {
...
createLabel.innerHTML = alternatives;

i=0: myData[0][Version] =1
i=1: myData[1][Version] =1
i=2: myData[2][Version] =1
i=3: myData[3][Version] =2
i=4: myData[4][Version] =2
i=5: myData[5][Version] =2

As you have only "alternatives[0]", "...[1]", "...[2]" they will not be displayed for i>2, meaning Version 2

Insert some "alerts" to check.

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

tomschuette
Topic Author
Offline
New Member

More

4 years 2 months ago #229891 by tomschuette

Replied by tomschuette on topic Javascript create table from data

Hi joffm, thank you for your help. That clears things up for me. Do you have an idea on how to make it so that the "alternatives" are always added to the first column, no matter the value of "myVersion"?

Please Log in to join the conversation.

Joffm
Offline
LimeSurvey Community Team

More

4 years 2 months ago #229894 by Joffm

Replied by Joffm on topic Javascript create table from data

If there is a modulo-function, something like "alternatives[i mod 3]"
Or you create your own function to calculate it.

To explain: I only can read a javascript code, as I know other programming languages, but I do not know more than 15 functions.

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

Joffm
Offline
LimeSurvey Community Team

More

4 years 2 months ago #229905 by Joffm

Replied by Joffm on topic Javascript create table from data

Should be

If there is a modulo-function, something like "alternatives(i mod 3)"
It was removed because of the brackets

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

tpartner
Offline
LimeSurvey Community Team

More

4 years 2 months ago #229909 by tpartner

Replied by tpartner on topic Javascript create table from data

There a re a couple of problems, some undefined keys in the loops and you are inserting a table into a table which is invalid HTML.

I would do something like this using jQuery which is easier to read:

xx

Code:

<table id="dce_table"></table>
<script type="text/javascript" data-author="Tony Partner">	
	
	$(document).on('ready pjax:scriptcomplete',function(){	
	
		function createDCE() {
								
			var alternatives = ["Car","Bike","Train"];
			var myVERSION = "2";
			
			var myData = [
				{ "Version":"1","Task":"1","Concept":"1","Att1":"Banane","Att2":"5€","Att3":"27,56","Att4":"$$$","Att5":"50°C"},
				{ "Version":"1","Task":"1","Concept":"2","Att1":"Karotte","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
				{ "Version":"1","Task":"1","Concept":"3","Att1":"Banane + Karotte","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
				{ "Version":"2","Task":"1","Concept":"1","Att1":"Banane","Att2":"5€","Att3":"27,56","Att4":"$$$","Att5":"50°C"},
				{ "Version":"2","Task":"1","Concept":"2","Att1":"Karotte","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"},
				{ "Version":"2","Task":"1","Concept":"3","Att1":"Banane + Karotte","Att2":"10€","Att3":"58,87","Att4":"€€€","Att5":"165°F"}
			]
			
			// Insert the header row
			$('#dce_table').append('<thead><tr></tr></thead>'); 
			
			// Create an array of the table headers
			var col = [];
			col.push("Option");
			$.each(myData[0], function(key, val) {
				if (key != "Version" && key != "Task" && key != "Concept") {
					col.push(key);
				}
			});
			col.push("Buttons here");
			
			// Insert those headers
			$.each(col, function(i, val) {
				$('#dce_table thead tr:eq(0)').append('<th>'+val+'</th>')
			});
			
			// Insert the tbody element
			$('#dce_table').append('<tbody></tbody>'); 
			
			// Loop through the "myData" elements
			var rowIndex = 0;
			$.each(myData, function(i, rowData) {
				
				// Only access those that match "myVERSION"
				if (rowData["Version"] === myVERSION) {
					// Insert a data row, including the first cell (row label?)
					$('#dce_table tbody').append('<tr data-index="'+rowIndex+'"><td>'+alternatives[rowIndex]+'</td></tr>');
					
					// Now insert the data cells
					$.each(col, function(i, val) {
						if(val in rowData) {
							$('#dce_table tbody tr[data-index="'+rowIndex+'"]').append('<td>'+rowData[val]+'</td>');
						}
					});
					rowIndex++;
				}
			});
		}
	 
		createDCE();
	});
</script>

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

tomschuette
Topic Author
Offline
New Member

More

4 years 2 months ago #229910 by tomschuette

Replied by tomschuette on topic Javascript create table from data

Hi Tony, thank you very much. However, if I try and use your code, nothing shows up? I am simultaneously using the W3 web editor just to test code quick and dirty, but there's nothing there either...

Anything else I have to do to make your code work?

Please Log in to join the conversation.