# Reading XML data from website

**URL:** <https://discourse.processing.org/t/reading-xml-data-from-website/3500>\
**Category:** Coding Questions\
**Created:** [September 13, 2018, 12:04am UTC](https://discourse.processing.org/t/reading-xml-data-from-website/3500 "2018-09-13T00:04:02Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![specials](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@specials](https://discourse.processing.org/u/specials)\
**Post date:** [September 13, 2018, 12:04am UTC](https://discourse.processing.org/t/reading-xml-data-from-website/3500/1 "2018-09-13T00:04:02Z")

</div>

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.

Thanks.

````auto
var xml;
var json;

function preload() {
  xml = loadXML('https://undefeated.com/collections/new.atom');
  json = loadJSON('https://undefeated.com/collections/new.json');
}

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');
    console.log(link.type);
    products.push(new Product(title, link, tags));
  }

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

}

function draw() {
  // put drawing code here
}

function Product(title, link, tags) {

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

}```
````

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 13, 2018, 2:52am UTC](https://discourse.processing.org/t/reading-xml-data-from-website/3500/2 "2018-09-13T02:52:30Z")

</div>

> [@specials](#):
>
> However, _xml_, a variable defined earlier in the code, works just fine.

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

> **[reference | p5.js](https://p5js.org/reference/#/p5/preload)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

> [@specials](#):
>
> Is there something I’m missing here, because to me I should be able to access those functions.

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

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

However, this particular asset loading depends on _xml_ to be already 100% loaded! 😓

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

`xml = loadXML('https://undefeated.com/collections/new.atom', loadProducts);`

Notice the variable _loadProducts_ as the 2nd argument of **loadXML()** there. ⚠

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

Now, move your whole _products_ code inside that **loadProducts()** callback function, including both the loop and the 2nd **loadXML()**. 😇

All of that is gonna happen before **setup()** even starts! 😸

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 13, 2018, 3:05am UTC](https://discourse.processing.org/t/reading-xml-data-from-website/3500/3 "2018-09-13T03:05:56Z")

</div>

Here’s a sketch which does something very similar:

1. Online sketch: [ThimbleProjects.org/gotoloop/96556/](http://ThimbleProjects.org/gotoloop/96556/)
2. Source code: [ThimbleProjects.org/gotoloop/96556/sketch.js](http://ThimbleProjects.org/gotoloop/96556/sketch.js)

That sketch needs to load images whose links are inside a “.csv” file:  
[ThimbleProjects.org/gotoloop/96556/players.csv](http://ThimbleProjects.org/gotoloop/96556/players.csv)

So it 1st loads it within **preload()**:

```javascript
function preload() {
  loadTable(FILENAME, createPlayers);
}

```

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

```javascript
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. 🤠

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

---

<div class="post-metadata">

**Author:** ![specials](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@specials](https://discourse.processing.org/u/specials)\
**Post date:** [September 13, 2018, 8:22pm UTC](https://discourse.processing.org/t/reading-xml-data-from-website/3500/4 "2018-09-13T20:22:31Z")

</div>

Wow thank you man, you have been really helpful!