<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" &amp;&amp; key != "Task" &amp;&amp; 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>
 

<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" &amp;&amp; key != "Task" &amp;&amp; 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>