p5.js | loadJSON() Function

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.
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
JavaScript-p5.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
File uploading in React.js
How to Open URL in New Tab using JavaScript ?
Node.js | fs.writeFileSync() Method
Hide or show elements in HTML using display property
How do you run JavaScript script through the Terminal?
How to insert spaces/tabs in text using HTML/CSS?
Installation of Node.js on Linux
How to set the default value for an HTML <select> element ?
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?