p5.js loadXML() Function

Read

Discuss

The loadXML() function is used to read the contents of a file or URL and return it as a XML object. The file must be present in the sketch directory to be accessed. This method can be used to 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:

loadXML(filename, callback, errorCallback )

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

filename: This is a string which denotes the file path or URL from where the XML data has to be loaded.
callback: This is a function which is called when this function executes successfully. The first argument for this function is the XML 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.

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

Example 1:

/* == Contents of books.xml == 
  
<book> 
    <name>The Adventures of Sherlock Holmes: Part One</name> 
    <author>Arthur Conan Doyle</author> 
    <price>323</price> 
    <genre>Detective fiction</genre> 
</book> 
  
*/
  
let loadedXML = null; 
  
function setup() { 
  createCanvas(500, 200); 
  textSize(22); 
  
  text("Click on the button below to "
       + "load XML from file", 20, 20); 
  
  // Create a button for loading the XML 
  loadBtn = createButton("Load XML from file"); 
  loadBtn.position(30, 50) 
  loadBtn.mousePressed(loadXMLFile); 
} 
  
function loadXMLFile() { 
  
  // Load the XML from file 
  loadedXML = loadXML('books.xml', onFileload); 
} 
  
function onFileload() { 
  text("XML loaded successfully...", 30, 100); 
  let book = loadedXML.getChildren(); 
    
  // Get the content of the tags 
  let name = book[0].getContent(); 
  let author = book[1].getContent(); 
  let price = book[2].getContent(); 
  let genre = book[3].getContent(); 
  
  text("Name: " + name, 30, 140); 
  text("Author: " + author, 30, 160); 
  text("Price: " + price, 30, 180); 
  text("Genre: " + genre, 30, 200); 
} 

Output:
load-xml-books

Example 2:

/* == Contents of movies.xml == 
  
<movies> 
    <movie year="1972" director="Francis Ford Coppola"> 
        The Godfather 
    </movie> 
    <movie year="1939" director="Victor Fleming"> 
        The Wizard of Oz 
    </movie> 
    <movie year="1941" director="Orson Welles"> 
        Citizen Kane 
    </movie> 
</movies> 
  
*/
  
let loadedXML = null; 
  
function setup() { 
  createCanvas(500, 450); 
  textSize(22); 
  
  text("Click on the button below to "
        + "load XML from file", 20, 20); 
  
  // Create a button for loading the XML 
  loadBtn = createButton("Load XML from file"); 
  loadBtn.position(30, 50) 
  loadBtn.mousePressed(loadXMLFile); 
} 
  
function loadXMLFile() { 
  
  // Load the XML from file 
  loadedXML = loadXML('movies.xml', onFileload); 
} 
  
function onFileload() { 
  
  // Get the children with the "movie" tag 
  let children = loadedXML.getChildren('movie'); 
  
  for (let i = 0; i < children.length; i++) { 
  
    // Get the content of the tag 
    let name = children[i].getContent(); 
  
    // Get a numerical attribute 
    let year = children[i].getNum('year'); 
  
    // Get a string attribute 
    let director = children[i].getString('director'); 
  
    text("Name: " + name, 30, 100 + i * 80); 
    text("Year: " + year, 30, 120 + i * 80); 
    text("Director: " + director, 30, 140 + i * 80); 
  } 
} 