p5.js loadJSON() Function

The loadJSON() function is used to read the contents of a JSON file or URL and return it as an object. In case the file contains a JSON array, this function would still return it as an object with the index numbers specifying the different keys of the object. This method can support file sizes up to 64MB.

This function is asynchronous, therefore it is recommended to be called in the preload() function to ensure that the function is executed before the other functions.

Syntax:

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

or

loadJSON(path, datatype, callback, errorCallback)

or

loadJSON(path, callback, errorCallback)

Parameters: This function accepts five parameters as mentioned above and described below:

• path: This is a string which denotes the file path or URL from where the JSON has to be loaded.
• jsonpOptions: This is an object which has options for settings related to “jsonp” . It is an optional parameter.
• datatype: It is a string which specifies whether the json object is “json” or “jsonp”. It is an optional parameter.
• callback: This is a function which is called when this function executes successfully. The first argument for this function is the data loaded from the file. It is an optional parameter.
• errorCallback: This is a function which is called if there is any error in executing the function. The first argument for this function is the error response. It is an optional parameter.

Return Value: It returns an object with the loaded JSON data.

The examples below illustrate the loadJSON() function in p5.js:

Example 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);
  }
}

Output:

Example 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);
}

Output:

Online editor: https://editor.p5js.org/

Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

Reference: https://p5js.org/reference/#/p5/loadJSON