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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
load-from-file

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
load-from-URL

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

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.