p5.js | función cargarTabla()

La función loadTable() se usa para leer el contenido de un archivo o URL y crear un objeto p5.Table a partir de él. El parámetro de opciones se puede utilizar para definir el tipo de formato en el que se espera que se lean los datos. Todos los archivos cargados y guardados están en codificación UTF-8.

Esta función es asíncrona, por lo que se recomienda llamarla en la función preload() para asegurarse de que la función se ejecute antes que las otras funciones.

Sintaxis:

loadTable(filename, options, [callback], [errorCallback])

loadTable(filename, [callback], [errorCallback])

Parámetros: Esta función acepta cuatro parámetros como se mencionó anteriormente y se describe a continuación.

nombre de archivo: esta es una string que indica la ruta del archivo o la URL desde donde se deben cargar los datos.
opciones: Es una string que denota el formato del archivo a cargar. Puede ser «csv» que carga la tabla usando valores separados por comas o «tsv» que carga la tabla usando valores separados por tabuladores. También se puede especificar el valor «encabezado» para indicar si la tabla tiene un valor de encabezado. Se pueden usar varios comandos pasándolos como parámetros separados. Es un parámetro opcional.
devolución de llamada: esta es una función que se llama cuando esta función se ejecuta con éxito. El primer argumento de esta función son los datos XML cargados desde el archivo. Es un parámetro opcional.
errorCallback: esta es una función a la que se llama si hay algún error al ejecutar la función. El primer argumento para esta función es la respuesta de error. Es un parámetro opcional.

Los siguientes ejemplos ilustran la función loadTable() en p5.js:

Ejemplo 1:

// Contents of books.csv
  
// Book One, Author One, Price One
// Book Two, Author Two, Price Two
// Book Three, Author Three, Price Three
  
let loadedTable = null;
  
function setup() {
  createCanvas(500, 300);
  textSize(18);
  
  text("Click on the button below to"+
       " load Table from file", 20, 20);
  
  // Create a button for loading the table
  loadBtn = createButton("Load Table from file");
  loadBtn.position(30, 50)
  loadBtn.mousePressed(loadFile);
}
  
function loadFile() {
  
  // Load the table from file
  loadedTable = loadTable('books.csv', 'csv', onFileload);
}
  
function onFileload() {
  text("Table loaded successfully...", 20, 100);
  
  // Display through the table
  for (let r = 0; r < loadedTable.getRowCount(); r++) {
    for (let c = 0; c < loadedTable.getColumnCount(); c++) {
      text(loadedTable.getString(r, c), 
            20 + c * 200, 150 + r * 20);
    }
  }
}

Producción:
mesa de carga

Ejemplo 2:

// Contents of books_header.csv
  
// title, author, price
// Book One, Author One, Price One
// Book Two, Author Two, Price Two
// Book Three, Author Three, Price Three
  
let loadedTable = null;
  
function setup() {
  createCanvas(500, 300);
  textSize(22);
  
  text("Click on the button below to "
       + "load Table from file", 20, 20);
  
  // Create a button for loading the table
  loadBtn = createButton("Load Table from file");
  loadBtn.position(30, 50)
  loadBtn.mousePressed(loadFile);
}
  
function loadFile() {
  // Load the table from file with headers
  loadedTable = loadTable('books_header.csv',
                'csv', 'header', onFileload);
}
  
function onFileload() {
  text("Table loaded successfully...", 20, 100);
  
  // Display the headers
  for (let h = 0; h < loadedTable.getColumnCount(); h++) {
    text(loadedTable.columns[h], 20 + h * 200, 150);
  }
  
  textSize(16);
  // Display the data in the table
  for (let r = 0; r < loadedTable.getRowCount(); r++) {
    for (let c = 0; c < loadedTable.getColumnCount(); c++) {
      text(loadedTable.getString(r, c), 
            20 + c * 200, 170 + r * 20);
    }
  }
}

Producción:
encabezados de tabla de carga