Skip to content
Related Articles

Related Articles

Improve Article

p5.js | loadJSON() Function

  • Last Updated : 26 Mar, 2020

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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:
load-from-file

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(
}
  
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:
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




My Personal Notes arrow_drop_up
Recommended Articles
Page :