p5.js Table getObject()用法及代碼示例

p5.js中p5.Table的getObject()方法用於檢索表中的所有數據作為對象。可以指定一個可選的列名來存儲表的所有行，並將該列名作為屬性。

用法:

getObject( [headerColumn] )

參數：此方法接受如上所述和以下描述的單個參數：

headerColumn:它是一個String，表示應該用作每個行對象標題的列的名稱。

返回值：此方法返回一個包含表中所有數據的對象。

以下示例說明了p5.js中的getObject()方法：

範例1：

Javascript

function setup() { 
  createCanvas(600, 300); 
  textSize(18); 
  
  text("Click on the button to get " + 
       "the values of the table as an object", 
       20, 20); 
  
  setBtn = 
    createButton("Get all table values"); 
  setBtn.position(30, 40); 
  setBtn.mouseClicked(showTable); 
  
  // Create the table 
  table = new p5.Table(); 
  
  setTableData(); 
} 
  
function setTableData() { 
  table.addColumn('Invention'); 
  table.addColumn('Inventors'); 
  
  let tableRow = table.addRow(); 
  tableRow.setString('Invention', 'Telescope'); 
  tableRow.setString('Inventors', 'Galileo'); 
  
  tableRow = table.addRow(); 
  tableRow.setString('Invention', 'Steam Engine'); 
  tableRow.setString('Inventors', 'James Watt'); 
  
  tableRow = table.addRow(); 
  tableRow.setString('Invention', 'Radio'); 
  tableRow.setString('Inventors', 'Guglielmo Marconi'); 
} 
  
function showTable() { 
  clear(); 
  text("All values retrieved using the " + 
       "getObject() method", 20, 20); 
  
  // Get all the values in the table as an array 
  let tableObject = table.getObject(); 
  console.log(tableObject); 
  
  // Get every row in the table using the length 
  // of their keys 
  for (let r = 0; r < Object.keys(tableObject).length; r++) { 
    
    // Display the row using the JSON format 
    text(JSON.stringify(tableObject[r]), 20, 100 + 30 * r); 
  } 
}

輸出：

範例2：

Javascript

function setup() { 
  createCanvas(600, 400); 
  textSize(18); 
  
  text("Click on the button to get the " +  
       "values of the table as an object", 
       20, 20); 
  
  setBtn = 
    createButton("Get all table values"); 
  setBtn.position(30, 40); 
  setBtn.mouseClicked(showTable); 
  
  // Create the table 
  table = new p5.Table(); 
  
  setTableData(); 
} 
  
function setTableData() { 
  table.addColumn('Invention'); 
  table.addColumn('Inventors'); 
  
  let tableRow = table.addRow(); 
  tableRow.setString('Invention', 'Telescope'); 
  tableRow.setString('Inventors', 'Galileo'); 
  
  tableRow = table.addRow(); 
  tableRow.setString('Invention', 'Steam Engine'); 
  tableRow.setString('Inventors', 'James Watt'); 
  
  tableRow = table.addRow(); 
  tableRow.setString('Invention', 'Radio'); 
  tableRow.setString('Inventors', 'Guglielmo Marconi'); 
} 
  
function showTable() { 
  clear(); 
  text("All the values are retrieved " + 
       "using the getObject() method", 20, 20); 
  
  text("Below is the object representation " + 
       "of the whole table", 20, 80); 
  
  // Get all the values in the table as an object 
  // with the header column as "Invention" 
  let tableObject = table.getObject("Invention"); 
  console.log(tableObject); 
  
  // Display the object using the JSON format 
  text(JSON.stringify(tableObject, null, '\t'), 20, 120); 
}

輸出：

在線編輯： https://editor.p5js.org/

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

參考： https://p5js.org/reference/#/p5.Table/getObject

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 p5.Table getObject() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。