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

loadJSON()函數用於讀取JSON文件或URL的內容，並將其作為對象返回。如果文件包含JSON數組，則此函數仍會將其作為對象返回，其索引號指定該對象的不同鍵。此方法可以支持最大64MB的文件。

該函數是異步的，因此建議在preload()函數中調用該函數，以確保該函數先於其他函數執行。

用法:

loadJSON(path, jsonpOptions, datatype, callback, errorCallback)

或者

loadJSON(path, datatype, callback, errorCallback)

或者

loadJSON(path, callback, errorCallback)

參數：該函數接受上述和以下所述的五個參數：

path:這是一個字符串，表示必須從其加載JSON的文件路徑或URL。
jsonpOptions:該對象具有與“jsonp”相關的設置選項。它是一個可選參數。
datatype:它是一個字符串，它指定json對象是“json”還是“jsonp”。它是一個可選參數。
callback:當該函數成功執行時，將調用此函數。此函數的第一個參數是從文件加載的數據。它是一個可選參數。
errorCallback:如果執行該函數時有任何錯誤，則調用該函數。此函數的第一個參數是錯誤響應。它是一個可選參數。

返回值：它返回帶有加載的JSON數據的對象。

以下示例說明了p5.js中的loadJSON()函數：

範例1：

let loadedJSON = null; 
  
function setup() { 
  createCanvas(500, 400); 
  textSize(22); 
  
  text("Click on the button below to load JSON from file", 20, 20); 
  
  // Create a button for loading the JSON 
  loadBtn = createButton("Load JSON from file"); 
  loadBtn.position(30, 50) 
  loadBtn.mousePressed(loadJSONFile); 
} 
  
function loadJSONFile() { 
  // Load the JSON from file 
  loadedJSON = loadJSON('books.json', onFileload); 
} 
  
function onFileload() { 
  text("File loaded successfully...", 30, 100); 
  for (let i = 0; i < 3; i++) { 
    text("Name:" + loadedJSON[i]["name"], 30, 140 + i * 80); 
    text("Author:" + loadedJSON[i]["author"], 30, 160 + i * 80); 
    text("Price:" + loadedJSON[i]["price"], 30, 180 + i * 80); 
  } 
}

輸出：
load-from-file

範例2：

let loadedJSON = null; 
  
function setup() { 
  createCanvas(600, 300); 
  textSize(22); 
  
  text("Click on the button below to load JSON from URL", 20, 20); 
  
  // Create a button for loading the JSON 
  loadBtn = createButton("Load JSON from URL"); 
  loadBtn.position(30, 50) 
  loadBtn.mousePressed(loadURL); 
} 
  
function loadURL() { 
  
  // Load the JSON from API 
  loadedJSON = loadJSON( 
"https://jsonplaceholder.typicode.com/users/5", onURLload); 
} 
  
function onURLload() { 
  text("ID:" + loadedJSON["id"], 30, 100); 
  text("Name:" + loadedJSON["name"], 30, 120); 
  text("Username:" + loadedJSON["username"], 30, 140); 
  text("Email:" + loadedJSON["email"], 30, 160); 
  
  text("Address City:" + loadedJSON["address"]["city"], 30, 200); 
  text("Address Zipcode:" + loadedJSON["address"]["zipcode"], 30, 220); 
}

輸出：
load-from-URL

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

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

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

相關用法

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