p5.js | función cargarJSON()

La función loadJSON() se usa para leer el contenido de un archivo JSON o URL y devolverlo como un objeto. En caso de que el archivo contenga una array JSON, esta función aún lo devolvería como un objeto con los números de índice que especifican las diferentes claves del objeto. Este método puede admitir tamaños de archivo de hasta 64 MB.

Esta función es asíncrona, por lo que se recomienda llamarla en la función preload() para asegurarse de que la función se ejecute antes que las otras funciones.

Sintaxis:

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

o

loadJSON(path, datatype, callback, errorCallback)

o

loadJSON(path, callback, errorCallback)

Parámetros: esta función acepta cinco parámetros, como se mencionó anteriormente y se describe a continuación:

• ruta: esta es una string que indica la ruta del archivo o la URL desde donde se debe cargar el JSON.
• jsonpOptions: este es un objeto que tiene opciones para la configuración relacionada con «jsonp». Es un parámetro opcional.
• tipo de datos: es una string que especifica si el objeto json es «json» o «jsonp». Es un parámetro opcional.
• devolución de llamada: esta es una función que se llama cuando esta función se ejecuta con éxito. El primer argumento para esta función son los datos cargados desde el archivo. Es un parámetro opcional.
• errorCallback: esta es una función a la que se llama si hay algún error al ejecutar la función. El primer argumento para esta función es la respuesta de error. Es un parámetro opcional.

Valor devuelto: Devuelve un objeto con los datos JSON cargados.

Los siguientes ejemplos ilustran la función loadJSON() en p5.js:

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

Producción:

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

Producción:

Editor en línea: https://editor.p5js.org/

Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

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