Store/extract array of integers within element attributes

Question

I'm trying to build a game based on a 2d grid in JavaScript.

Inside a nested for loop, I set the data attribute of a cell like this:

cell.setAttribute('data-pos',[i,j]);

In my event handler I get the data like this:

let pos = event.target.getAttribute('data-pos');

When I try to access the elements of pos something strange happens.

For a cell with data-pos of [1, 3],

I get the following values when I use console.log:

pos[0] = 1
pos[1] = ,
pos[2] = 3

Somehow the comma is being treated as an array element.

Why is this and how can I correctly pass values for i and j to the event handler please?

Answer 1

As @ggorlen pointed out in the comments, the line cell.setAttribute('data-pos',[i,j]) assigns the the string value of '1,3' to your data-pos attribute (since its value cannot be an array).

If that's fine for you, you may get your data back into array with:

let pos = event.target.getAttribute('data-pos').split(',')

If you prefer to pass your data to DOM and get it back upon click and avoid parsing stringified values you may introduce 2 data-* attributes, like data-pos-i/data-pos-j:

const cells = ((i,j) => Array.from(
                {length:i*j},
                (_,k) => ({id:k, i:k%j, j:0|(k/j)%i}))
              )(5,3),
      matrix = (flatArr => 
                  flatArr.reduce((r,{id,i,j},k) => 
                    (r[i]=(r[i]||[]), r[i][j] = {id, i, j}, r), [])
               )(cells),
      tableHTML = (tableData => {
                    const rowsHTML = tableData
                                      .map(tableRow => 
                                          '<tr>'+tableRow.map(({id,i,j}) => `<td id=${id} data-pos-i="${i}" data-pos-j="${j}"></td>`).join('')+'</tr>')
                                      .join('')
                    return `<table>${rowsHTML}</table>`
                  })(matrix),
      mytable = document.getElementById('mytable')
      
mytable.innerHTML = tableHTML

mytable.addEventListener('click', ({target}) => {
  const cellData = {i:target.dataset.posI, j:target.dataset.posJ}
  console.log(cellData)
})

#mytable td {
  display: table-cell;
  width: 20px;
  height: 20px;
  background: grey;
  cursor: pointer;
}

#mytable td:hover {
  background: #fff;
}

<table id="mytable"></table>

However, the better approach would be not to bounce your data back and forth between state and DOM.

Instead, you may store your cells as a flat array of objects where each cell-object has i,j-coordinates bound to unique id (along with other necessary data), thus upon click you may look-up for any bound data by id:

const cells = ((i,j) => Array.from(
                {length:i*j},
                (_,k) => ({id:k, i:k%j, j:0|(k/j)%i}))
              )(5,3),
      matrix = (flatArr => 
                  flatArr.reduce((r,{id,i,j},k) => 
                    (r[i]=(r[i]||[]), r[i][j] = id, r), [])
               )(cells),
      tableHTML = (tableData => {
                    const rowsHTML = tableData
                                      .map(tableRow => 
                                          '<tr>'+tableRow.map(cellData => `<td id=${cellData}></td>`).join('')+'</tr>')
                                      .join('')
                    return `<table>${rowsHTML}</table>`
                  })(matrix),
      mytable = document.getElementById('mytable')
      
mytable.innerHTML = tableHTML

mytable.addEventListener('click', ({target}) => {
  const cellData = cells.find(({id}) => id == target.id)
  console.log(cellData)
})

#mytable td {
  display: table-cell;
  width: 20px;
  height: 20px;
  background: grey;
  cursor: pointer;
}

#mytable td:hover {
  background: #fff;
}

<table id="mytable"></table>