Having trouble with getting Objects after loading JSON to canvas - Fabric JS

Question

I am building a template tool with Fabric.JS . I have been able to successful serialize a canvas into DatalessJSON , and then deserialize the DatalessJSON back onto the canvas. However, I am having an issue trying to work with the objects once the JSON has been loaded.

 function loadTemplate() {


 var template = $('#JSONserial').val();
 canvas.clear();
 canvas.loadFromDatalessJSON(template);
 canvas.renderAll();

 var allObjects = canvas.getObjects();

 console.log(allObjects);

So here, The canvas is definitely loaded with the JSON successfully, and all of the objects appear no problem. However, when I try the getObjects function, the console.log statement returns "[]"

I have extended the toObjects function with the 'name' attribute so that I can identify each of the JSON loaded objects, but I can't even get that far as I am unable to pull the objects at all.

Any ideas?

Answer 1

loadFromDatalessJson is asyncronous.

loadFromDatalessJSON(json, callback, reviver)

Use the callback to run code at the end of object loading.

 function loadTemplate() {
 var template = $('#JSONserial').val();
 canvas.clear();
 var allObjects = [];
 canvas.loadFromDatalessJSON(template, function(){
   allObjects = canvas.getObjects();
   console.log(allObjects);
   canvas.renderAll();
 });

}