Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

p5.js | loadXML() Function

  • Last Updated : 26 Mar, 2020

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.

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:

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

Output:
load-xml-movies

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/loadXML




My Personal Notes arrow_drop_up
Recommended Articles
Page :