Get input field values and put them into a 2D array

Question

I'm trying to get input field values and put them into a two dimensional array. But the problem is am not able to put the values into their desired location. for instance get n number of values entered, and then put them into nXn array.

Here's the html inputs fields

 <table>
   <tr>
     <td><input type="number" id="0" name="R0C0" placeholder="R0C0" ></td>
     <td><input type="number"  id="1" name="R0C1" placeholder="R0C1" ></td>
     <td><input type="number"  id="2" name="R0C2" placeholder="R0C2" ></td>
     <td><input type="number"  id="3" name="R0C3" placeholder="R0C3" ></td>
     <td><input type="number"  id="4" name="R0C4" placeholder="R0C4" ></td>
     <td><input type="number"   id="5"name="R0C5" placeholder="R0C5" ></td>
   </tr>

   <tr>
     <td><input type="number" id="6" name="R1C0" placeholder="R1C0" ></td>
     <td><input type="number" id="7" name="R1C1" placeholder="R1C1" ></td>
     <td><input type="number" id="8" name="R1C2" placeholder="R1C2" ></td>
     <td><input type="number" id="9" name="R1C3" placeholder="R1C3" ></td>
     <td><input type="number" id="10" name="R1C4" placeholder="R1C4" ></td>
     <td><input type="number" id="11" name="R1C5" placeholder="R1C5" ></td>
   </tr>

   <tr>
     <td><input type="number" id="12" name="R2C0" placeholder="R2C0" ></td>
     <td><input type="number" id="13" name="R2C1" placeholder="R2C1" ></td>
     <td><input type="number" id="14" name="R2C2" placeholder="R2C2" ></td>
     <td><input type="number" id="15" name="R2C3" placeholder="R2C3" ></td>
     <td><input type="number" id="16" name="R2C4" placeholder="R2C4" ></td>
     <td><input type="number" id="17" name="R2C5" placeholder="R2C5" ></td>
   </tr>

   <tr>
     <td><input type="number" id="18" name="R3C0" placeholder="R3C0" ></td>
     <td><input type="number" id="19" name="R3C1" placeholder="R3C1" ></td>
     <td><input type="number" id="20" name="R3C2" placeholder="R3C2" ></td>
     <td><input type="number" id="21" name="R3C3" placeholder="R3C3" ></td>
     <td><input type="number"id="22"  name="R3C4" placeholder="R3C4" ></td>
     <td><input type="number" id="23" name="R3C5" placeholder="R3C5" ></td>
   </tr>

   <tr>
     <td><input type="number" id="24" name="R4C0" placeholder="R4C0" ></td>
     <td><input type="number" id="25" name="R4C1" placeholder="R4C1" ></td>
     <td><input type="number" id="26" name="R4C2" placeholder="R4C2" ></td>
     <td><input type="number" id="27"name="R4C3" placeholder="R4C3" ></td>
     <td><input type="number" id="28" name="R4C4" placeholder="R4C4" ></td>
     <td><input type="number" id="29" name="R4C5" placeholder="R4C5" ></td>
   </tr>

   <tr>
     <td><input type="number" id="30" name="R5C0" placeholder="R5C0" ></td>
     <td><input type="number" id="31" name="R5C1" placeholder="R5C1" ></td>
     <td><input type="number" id="32" name="R5C2" placeholder="R5C2" ></td>
     <td><input type="number" id="33" name="R5C3" placeholder="R5C3" ></td>
     <td><input type="number" id="34" name="R5C4" placeholder="R5C4" ></td>
     <td><input type="number" id="35" name="R5C5" placeholder="R5C5" ></td>
   </tr>
 </table>
<button onClick="checking()">check</button>

....with four more rows and ids in increasing order till 36.

javascript code:

const checking = () =>{
   //create a 2D array of 6 rows and 6 columns
  var x = new Array(6);
  for (var i = 0; i < x.length; i++) {
    x[i] = new Array(6);
  }

    //loop to get all input values ie from id=1 to id=36
    var k=0;
    for(k; k<35; k++){
      //loop for rows
      for(var i=0; i<x.length; i++){
        var xValues = x[i]; //x[i] reference the array object
        //loop for columns
         for(var j=0; j < xValues.length; j++){
          //put the input values to the 2D array respective position
           x[i][j] =document.getElementById(k).value;
          //console.log("x"+"["+i+"]"+"["+j+"]"+" = "+x[j]);
         }
      }
   }
 }//end function

for supposed an input say,

x = [
  [1,2,3,4,5,6],
  [2,3,4,5,5,6],
  [1,2,3,4,5,6],
  [3,5,4,2,2,2],
  [4,5,3,4,3,2],
  [4,3,2,3,5,3]
];

I expect an output of,

1,2,3,4,5,6
2,3,4,5,5,6
1,2,3,4,5,6
3,5,4,2,2,2
4,5,3,4,3,2
4,3,2,3,5,3

However, from my script above, I get wired results. something like this............

x[0][0] = 1,,,,, 
x[0][1] = ,,,,, 
x[0][2] = ,,,,, 
x[0][3] = ,,,,, 
x[0][4] = ,,,,, 
x[0][5] = ,,,,, 
x[1][0] = 1,1,1,1,1,1 
x[1][1] = 1,1,,,, 
x[1][2] = ,,,,, 
x[1][3] = ,,,,, 
x[1][4] = ,,,,, 
x[1][5] = ,,,,, 
x[2][0] = 1,1,1,1,1,1 
x[2][1] = 1,1,1,1,1,1
x[2][2] = 1,1,1,,, 
x[2][3] = ,,,,, 
x[2][4] = ,,,,, 
x[2][5] = ,,,,, 
x[3][0] = 1,1,1,1,1,1 
x[3][1] = 1,1,1,1,1,1 
x[3][2] = 1,1,1,1,1,1 
x[3][3] = 1,1,1,1,,
x[3][4] = ,,,,,
....................

Answer 1

The reason why your code doesn't work is due to the most outer loop.

for(var k = 0; k<35; k++){
  for(var i=0; i<x.length; i++){
    var xValues = x[i]; //x[i] reference the array object
    for(var j=0; j < xValues.length; j++){
      x[i][j] =document.getElementById(k).value;
    }
  }
}

This loops for every element over all the rows and cells (36 ∙ 6 ∙ 6 = 1296 iterations). You have to choose your loop. You can go with either the most outer, or the inner two.

for (let k = 0; k < 36; k++) {
  let i = Math.floor(k / 6),
      j = k % 6;

  x[i][j] = document.getElementById(k).value;
}

or

for (let i = 0; i < x.length; i++) {
  for(let j = 0; j < x[i].length; j++) {
    let k = i * 6 + j;

    x[i][j] = document.getElementById(k).value;
  }
}

But not both nested in each other.

I've also added a working example.

function checking1() {
  var x = [];
  for (let index = 0; index < 36; index++) {
    // don't forget to change ^ from 35 to 36 or < to <=
    let innerIndex = index % 6,
        outerIndex = Math.floor(index / 6);
  
    if (!innerIndex) {
      x[outerIndex] = [];
    }
    
    let element = document.getElementById(index);
    x[outerIndex][innerIndex] = element.value;
  }
  
  console.log("checking1", x);
}

function checking2() {
  var x = new Array(6).fill().map((_, outerIndex) => {
    return new Array(6).fill().map((_, innerIndex) => {
      var index = outerIndex * 6 + innerIndex,
          element = document.getElementById(index);
      return element.value;
    });
  });
  
  console.log("checking2", x);
}

var button = document.querySelector("button");
button.addEventListener("click", checking1);
button.addEventListener("click", checking2);

<table>
  <tr>
    <td><input type="number" id="0" name="R0C0" placeholder="R0C0" ></td>
    <td><input type="number"  id="1" name="R0C1" placeholder="R0C1" ></td>
    <td><input type="number"  id="2" name="R0C2" placeholder="R0C2" ></td>
    <td><input type="number"  id="3" name="R0C3" placeholder="R0C3" ></td>
    <td><input type="number"  id="4" name="R0C4" placeholder="R0C4" ></td>
    <td><input type="number"   id="5"name="R0C5" placeholder="R0C5" ></td>
  </tr>

  <tr>
    <td><input type="number" id="6" name="R1C0" placeholder="R1C0" ></td>
    <td><input type="number" id="7" name="R1C1" placeholder="R1C1" ></td>
    <td><input type="number" id="8" name="R1C2" placeholder="R1C2" ></td>
    <td><input type="number" id="9" name="R1C3" placeholder="R1C3" ></td>
    <td><input type="number" id="10" name="R1C4" placeholder="R1C4" ></td>
    <td><input type="number" id="11" name="R1C5" placeholder="R1C5" ></td>
  </tr>

  <tr>
    <td><input type="number" id="12" name="R2C0" placeholder="R2C0" ></td>
    <td><input type="number" id="13" name="R2C1" placeholder="R2C1" ></td>
    <td><input type="number" id="14" name="R2C2" placeholder="R2C2" ></td>
    <td><input type="number" id="15" name="R2C3" placeholder="R2C3" ></td>
    <td><input type="number" id="16" name="R2C4" placeholder="R2C4" ></td>
    <td><input type="number" id="17" name="R2C5" placeholder="R2C5" ></td>
  </tr>

  <tr>
    <td><input type="number" id="18" name="R3C0" placeholder="R3C0" ></td>
    <td><input type="number" id="19" name="R3C1" placeholder="R3C1" ></td>
    <td><input type="number" id="20" name="R3C2" placeholder="R3C2" ></td>
    <td><input type="number" id="21" name="R3C3" placeholder="R3C3" ></td>
    <td><input type="number"id="22"  name="R3C4" placeholder="R3C4" ></td>
    <td><input type="number" id="23" name="R3C5" placeholder="R3C5" ></td>
  </tr>

  <tr>
    <td><input type="number" id="24" name="R4C0" placeholder="R4C0" ></td>
    <td><input type="number" id="25" name="R4C1" placeholder="R4C1" ></td>
    <td><input type="number" id="26" name="R4C2" placeholder="R4C2" ></td>
    <td><input type="number" id="27"name="R4C3" placeholder="R4C3" ></td>
    <td><input type="number" id="28" name="R4C4" placeholder="R4C4" ></td>
    <td><input type="number" id="29" name="R4C5" placeholder="R4C5" ></td>
  </tr>

  <tr>
    <td><input type="number" id="30" name="R5C0" placeholder="R5C0" ></td>
    <td><input type="number" id="31" name="R5C1" placeholder="R5C1" ></td>
    <td><input type="number" id="32" name="R5C2" placeholder="R5C2" ></td>
    <td><input type="number" id="33" name="R5C3" placeholder="R5C3" ></td>
    <td><input type="number" id="34" name="R5C4" placeholder="R5C4" ></td>
    <td><input type="number" id="35" name="R5C5" placeholder="R5C5" ></td>
  </tr>
</table>
<button>check</button>

Answer 2

Avoid writing tedious HTML -- create your table and inputs dynamically. While generating the HTML assign values to inputs as they are being created. The Map() object will be useful on the next phase of your project.

DOM Methods
- HTMLFormElement
- .insertRow() & .insertCell()
- .insertAdjacentHTML()
Data Structures - Array & Map

let data = [
  [1, 2, 3, 4, 5, 6],
  [2, 3, 4, 5, 5, 6],
  [1, 2, 3, 4, 5, 6],
  [3, 5, 4, 2, 2, 2],
  [4, 5, 3, 4, 3, 2],
  [4, 3, 2, 3, 5, 3]
];

let matrix = new Map();

function setData(data, matrix, rows = 6, cells = 6) {
  const form = document.forms[0];
  const seats = document.querySelector('.seats');
  
  for (let r = 0; r < rows; r++) {
    const row = seats.insertRow();
    for (let c = 0; c < cells; c++) {
      const cel = row.insertCell();
      const input = `<input id="r${r}c${c}" name="r${r}c${c}" class="seat" type="number" min="0" max="6" value="0">`;
      cel.insertAdjacentHTML('beforeend', input);
      cel.className = `r${r}c${c}`;
      matrix.set(`r${r}c${c}`, data[r][c]);
      form[`r${r}c${c}`].value = data[r][c];
    }
  }
}

setData(data, matrix)

table {
  display: inline-table;
  table-layout: fixed;
  height: 80%
}

.concertHall {
  width: 80%;
}

th {
  width: 5ch;
  height: 1.2rem;
}

td {
  text-align: center;
  height: 45px;
  border: 1px solid #000;
}

.seats td::before {
  content: attr(class)' ';
}

.seat {
  display: inline-block;
  width: 4ch;
  border: 1px solid green;
}

.rowIdx {
  width: 10px;
  transform:translate(12px, 0px);
  font-weight: 900;
}

.rowIdx td {
  border-color: transparent;
}

<form id='seating'>
  <fieldset name='layout'>
    <legend>Seating Matrix</legend>
 <table class='rowIdx'><thead><tr><th>&nbsp;</th></tr><tr><th></th></tr></thead><tbody><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr><tr><td>4</td></tr><tr><td>5</td></tr><tr><td>6</td></tr></tbody></table><table class='concertHall'><thead class='colIdx'><tr><th colspan='6'>Front Stage</th></tr><tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr></thead><tbody class='seats'></tbody></table>
  </fieldset>
</form>

Answer 3

I'd suggest using the natural structure of the table to provide the array dimensions, that way you won't get errors if they code ever gets out of sync with the html. Maybe something along these lines:

const checking = () => {
    const result = [];
    const rows = Array.from(document.getElementsByTagName('tr'));

    rows.forEach(row => {
      var current = [];
      const inputs = Array.from(row.getElementsByTagName('input'));

      inputs.forEach((input) => {
        current.push(input.value);
      });
      result.push(current);
    });

    result.forEach(val => {
      console.log("[" + val.toString() + "]");
    });
  };

Answer 4

If you are looking just logging the data, this will suffice:

checking = () => {
  let res = Array.from(document.querySelectorAll('input')).reduce((acc, input) => {
    // Determining the indexes based off of your input name attributes
    let indexes = input.name.match(/R([0-9]+)C([0-9]+)/);
    // Ensure that the returned array length of the regular expression above is 3
    if (indexes.length === 3) {
      if (acc[indexes[1]] === undefined) {
        acc[indexes[1]] = {};
      }
      acc[indexes[1]][indexes[2]] = input.value;
    }
    return acc;
  }, {});
  console.log(res);
}

<table>
  <tr>
    <td><input type="number" id="0" name="R0C0" placeholder="R0C0"></td>
    <td><input type="number" id="1" name="R0C1" placeholder="R0C1"></td>
    <td><input type="number" id="2" name="R0C2" placeholder="R0C2"></td>
    <td><input type="number" id="3" name="R0C3" placeholder="R0C3"></td>
    <td><input type="number" id="4" name="R0C4" placeholder="R0C4"></td>
    <td><input type="number" id="5" name="R0C5" placeholder="R0C5"></td>
  </tr>

  <tr>
    <td><input type="number" id="6" name="R1C0" placeholder="R1C0"></td>
    <td><input type="number" id="7" name="R1C1" placeholder="R1C1"></td>
    <td><input type="number" id="8" name="R1C2" placeholder="R1C2"></td>
    <td><input type="number" id="9" name="R1C3" placeholder="R1C3"></td>
    <td><input type="number" id="10" name="R1C4" placeholder="R1C4"></td>
    <td><input type="number" id="11" name="R1C5" placeholder="R1C5"></td>
  </tr>
</table>
<button onClick="checking()">check</button>

Hope this helps,