p5.js | loadTable()函数

loadTable()函数用于读取文件或 URL 的内容并从中创建 p5.Table 对象。 options 参数可用于定义预期读取数据的格式类型。加载和保存的所有文件均采用 UTF-8 编码。

该函数是异步的，因此建议在 preload()函数中调用，以确保该函数在其他函数之前执行。

句法：

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

或者

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

参数：此函数接受四个参数，如上所述和如下所述。

• 文件名：这是一个字符串，表示必须从中加载数据的文件路径或 URL。
• options：它是一个字符串，表示要加载的文件的格式。它可以是使用逗号分隔值加载表格的“csv”，也可以是使用制表符分隔值加载表格的“tsv”。此外，可以指定值“header”来表示表是否具有标题值。可以通过将多个命令作为单独的参数传递来使用它们。它是一个可选参数。
• 回调：这是一个函数，当该函数执行成功时调用。此函数的第一个参数是从文件加载的 XML 数据。它是一个可选参数。
• errorCallback：这是一个函数，如果执行该函数有任何错误，则调用该函数。此函数的第一个参数是错误响应。它是一个可选参数。

以下示例说明了 p5.js 中的loadTable()函数：

示例 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);
    }
  }
}

输出：

示例 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);
    }
  }
}

输出：

在线编辑器： https://editor.p5js.org/

环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考： https://p5js.org/reference/#/p5/loadTable