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”。它是一个可选参数。
• 回调：这是一个函数，当该函数执行成功时调用。此函数的第一个参数是从文件加载的数据。它是一个可选参数。
• 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);
  }
}

输出：

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

输出：

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

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

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