Reading XML data from website

I am attempting to read the product page of a certain website, however I get an error on line 27, stating that goXML does not have a function named listChildren, along with all other p5 .xml functions. However, xml, a variable defined earlier in the code, works just fine. Is there something I’m missing here, because to me I should be able to access those functions.


var xml;
var json;

function preload() {
  xml = loadXML('');
  json = loadJSON('');

function setup() {
  // put setup code here
  var allChildren = xml.listChildren();

  var products_raw = xml.getChildren('entry');
  var products = [];

  for (var i = 0; i < products_raw.length; i++) {
    var title = products_raw[i].getChild('title');
    var link = products_raw[i].getChild('link').attributes.href + '.xml';
    var tags = products_raw[i].getChildren('s:tag');
    products.push(new Product(title, link, tags));

  var goXML = loadXML(products[0].link);
  var variants = goXML.listChildren();


function draw() {
  // put drawing code here

function Product(title, link, tags) {

  this.title = title; = link;
  this.tags = tags;


Of course it works! B/c it’s in the right place, inside preload(), which fully loads assets before setup() starts: :star_struck:

Well, the statement var goXML = loadXML(products[0].link); happens after preload() is long over. :slightly_frowning_face:

Easiest fix is simply moving it to preload() like the 1s already there. :bulb:

However, this particular asset loading depends on xml to be already 100% loaded! :sweat:

In such case, you may try to chain-load it right after xml is done. :chains:
In order to pull that out, pass a success callback as its 2nd parameter: :calling:

xml = loadXML('', loadProducts);

Notice the variable loadProducts as the 2nd argument of loadXML() there. :warning:

It’s supposed to be the function loadXML() calls back when the loading is 100% fully done. :100:

Now, move your whole products code inside that loadProducts() callback function, including both the loop and the 2nd loadXML(). :innocent:

All of that is gonna happen before setup() even starts! :smile_cat:

Here’s a sketch which does something very similar:

  1. Online sketch:
  2. Source code:

That sketch needs to load images whose links are inside a “.csv” file:

So it 1st loads it within preload():

function preload() {
  loadTable(FILENAME, createPlayers);

Once the “.csv” file asset is complete, it calls back createPlayers():

function createPlayers(table) {
  players.length = 0, entries = table.getRowCount();

  for (const r of table.getRows())  players.push(
    new Player(loadImage(r.getString(0)), r.getString(1), r.getNum(2))

Which in turn invokes loadImage() inside its loop. :cowboy_hat_face:

And when setup() finally starts, all resources are 100% ready to be used for the rest of the sketch! :partying_face:

Wow thank you man, you have been really helpful!