function createTableFromData(data) {
  let table = '<table>';
  
  // Table header row
  table += '<tr><th></th>';
  for (let key in data) {
      table += '<th>' + key + '</th>';
  }
  table += '</tr>';
  
  // Table body
  let maxRows = getMaxRows(data);
  for (let i = 0; i < maxRows; i++) {
      table += '<tr>';
      table += '<td>' + i + '</td>';
      for (let key in data) {
          let row = data[key][i] || [];
          table += '<td>' + row.join(', ') + '</td>';
      }
      table += '</tr>';
  }
  
  table += '</table>';
  return table;
}

// Function to get the maximum number of rows in the data
function getMaxRows(data) {
  let max = 0;
  for (let key in data) {
      let numRows = Object.keys(data[key]).length;
      if (numRows > max) {
          max = numRows;
      }
  }
  return max;
}


function displayJSON(){
  $.getJSON("http://127.0.0.1:5000/getJSON", function (data) {
    console.log(data);
    // Create the table
  let tableHtml = createTableFromData(data);

  // Display the table
  document.getElementById('container').innerHTML = tableHtml;
  });
}

// listen for mouse events
$("#canvas").mousedown(function (e) {
  handleMouseDown(e);
});
$("#canvas").mousemove(function (e) {
  handleMouseMove(e);
});
$("#canvas").mouseup(function (e) {
  handleMouseUp(e);
});

$("#canvas").mouseout(function (e) {
  handleMouseOut(e);
});
