AFRAME: Event on completion of dynamic adding of component

Question

My use-case is as follows:

In a loop, entities are being created and components are being set up. This is via a json-object that is being passed to the function. The question I have is how best to get an event that the whole set of entities and their components are being initialised. The code is something like this

var parent = document.querySelector('#parent');
var ent = document.createElement('a-entity');
parent.appendChild(ent);
for(var i =0; i = components.length; i++) {
   var arr = components[i];
   var cl = arr[0]; // class name
   var attr = arr[2]; // component name
   var attrV = arr[3]; // component data
   ent.setAttribute('class', cl);
   AFRAME.utils.entity.setComponentProperty(ent, attr, attrV);
   //ent.setAttribute(attr, attrV); tried with this too
}
console.log('loop completed')

The loop completed gets logged before the completion of the loading of some of the components. I would like to have some sort of a call back to know that all the components have been completed loaded.

There seems to be an event componentinitialized but it sends a return for only 1 component. My real requirement (not reflected in above code) is that an entity can have multiple components added.

To use the above, I may have to set this event for every component and keep track of whether it has been completed or not. Just wondering if there is a more elegant way to do it. Thanks

Just to add, using componentinitialized seems more complicated because aframe auto adds entities like position and rotation too. The current solution is to give a timeout before callback. Obviously, not happy about it. — RmR

Piotr Adam Milewski Piotr Adam Milewski · Accepted Answer · 2018-06-28T07:55:11

Entities emit the "loaded" event. It should be easier than listening for each component initialization within the entity.

Try out:

entity.addEventListener("loaded", (e) => {
  console.log(e)
})

like i did here.

AFRAME: Event on completion of dynamic adding of component

1 Answers