I am an absolute beginner in Javascript and I am trying to build a table by looping through my data. It works as intended, but as soon as I change the variable myVersion to 2 instead of 1, the cells in the first column are no longer filled with the values in alternatives but state undefined.

What I am trying to achieve is that the loop checks for the value of Version and only uses the corresponding data.

It works fine with myVersion = "1", which I just can't wrap my head around :D And all the other columns are filled correctly...

Please ignore the values in myData, they have no meaning as of right now :)

As I am a beginner, i am thankful for any tips and tricks to improve my code besides the question asked here.

Thanks in advance!

Here is a link to a fiddle with the code: https://jsfiddle.net/kovaroi/wfx1u0yk/1/

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();

<table id="dce_table">
</table>

CodePudding user response：

Your alternatives array has 3 values, with index 0, 1, 2.

Your myData array has 6 values, with index 0, 1, 2, 3, 4, 5.

When you loop over myData (for (var i = 0; i < myData.length; i )), as the first 3 values have Version: 1 they have indexes 0, 1, 2 which map to the indexes of the alternatives array. Your next 3 values, with Version: 2, have indexes 3, 4, 5 which don't exist in the alternatives array, causing it to return undefined.

CodePudding user response：

There is an index error in the loop. Your version 2 indexes are greater than 2 and alternatives array has max index 2 so when you changed the version 2 index i of mydata is becoming 3 4 5 and these indexes not exists in alternatives array.

hope i can tell the problem.