Hi I’m new with playcanvas but I would like to know if it’s possible to load a some text from an xml file something like list of objects and the you can add a new one in the xml file.
Thanks in advance.
Hi @Julio_A.P and welcome,
Reading from an XML file is definitely possible using vanilla JS methods. You can import your file to your Playcanvas project as a plain text file and read its contents in your script:
var xmlAsset = this.app.assets.find('note.xml');
var parser = new DOMParser();
var dom = parser.parseFromString(xmlAsset.resource, "application/xml");
console.log(dom.documentElement.nodeName);
Here is a helpful article on reading XML files in JS:
https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML
Now for updating the file on runtime you will have to host that file on a server of yours and do a server request to your backend, which is more complex.
2 Likes
Hi thanks for the answer right now I loaded the file and tried to make an XMLHttpRequest but when the method it’s launched it throws “Uncaught TypeError: Cannot read property ‘getElementsByTagName’ of null” there’s an example for that?
This is the link to my project: https://playcanvas.com/editor/scene/1047123
var Ui = pc.createScript('ui');
Ui.attributes.add('css', {type: 'asset', assetType:'css', title: 'CSS Asset'});
Ui.attributes.add('html', {type: 'asset', assetType:'html', title: 'HTML Asset'});
// initialize code called once per entity
Ui.prototype.initialize = function() {
var style = document.createElement('style');
document.head.appendChild(style);
style.innerHTML = this.css.resource || '';
this.div = document.createElement('div');
this.div.classList.add('container');
this.div.innerHTML=this.html.resource || '';
document.body.appendChild(this.div);
this.bindEvents();
//var xmlAsset = this.app.assets.find('OfficesFinal.xml');
//var parser = new DOMParser();
//var dom = parser.parseFromString(xmlAsset.resource, "application/xml");
};
Ui.prototype.bindEvents = function() {
var self = this;
// example
//
// get button element by class
var button = this.div.querySelector('.button');
// if found
var xmlAsset = this.app.assets.find('OfficesFinal.xml');
var xmlUrl = xmlAsset.getFileUrl();
console.log(xmlUrl);
if (button) {
// add event listener on `click`
button.addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200)
{
//this.LoadXML(this);
var docXml = this.responseXML;
var tabla = "<tr>oficinas</tr>";
var of = docXml.getElementsByTagName("oficinas");
for(var i = 0; i<of.lenght; i++)
{
tabla += "<tr><td>";
tabla += of[i].getElementsByTagName("cargo")[0].textContent;
tabla += "</td></tr>";
}
document.getElementById("demo").innerHTML = tabla;
}
};
xhr.open("GET", xmlUrl, true);
xhr.send();
console.log('button clicked');
}, false);
}
};
// update code called every frame
Ui.prototype.update = function(dt) {
};
Ui.prototype.LoadXML = function(xml) {
var docXml = xml.responseXML;
var tabla = "<tr>oficinas</tr>";
var of = docXml.getElementsByTagName("oficinas");
for(var i = 0; i<of.lenght; i++)
{
tabla += "<tr><td>";
tabla += of[i].getElementsByTagName("cargo")[0].textContent;
tabla += "</td></tr>";
}
document.getElementById("demo").innerHTML = tabla;
};
Hi @Julio_A.P,
You don’t need to do an HTTP request for loading a Playcanvas asset, the engine is already doing that to fetch it and make it available. And also Playcanvas parses the text in engine and prepares a document for it, so no need to parse it again. This will work for you:
var xmlAsset = this.app.assets.find('EmployeesFinal.xml');
if (button) {
// add event listener on `click`
button.addEventListener('click', function() {
var docXml = xmlAsset.resource;
var empleados = docXml.getElementsByTagName("empleados");
console.log(empleados);
}, false);
}
2 Likes
Hi Leonidas.
It’s still not working this error appears
Searching online it looks like the code it’s being loaded in the head that seems fine but they said that the code must be running in the body. But I don’t get why
Something else that I notices it’s that var docXml = xmlAsset.resource; it’s null but the xml it’s loaded I don’t get if its something wrong with that.
Here’s a bit of the xml
<?xml version="1.0" encoding="UTF-8"?>
<oficinas>
<cargo>
<title lang="en">Processing Manager</title>
</cargo>
<cargo>
<title lang="en">Closing Manager</title>
</cargo>
<cargo>
<title lang="en">Quality Control Manager</title>
</cargo>
</oficinas>
I think the issue isn’t with the code but with that specific xml file. Testing with the other file the code executes correctly and reads the tag. Here is a test:
1 Like
Yeah you’re totally right gonna check that file. Thanks a lot
1 Like