Trying to load via external json

[typometre]

I tried to load an external json on the example. Seems i could load the json and create the needed html from it. But the reste of SlotMachine got a problem slot-machine.js:72 Uncaught (in promise) TypeError: Cannot read property 'cloneNode' of undefined at SlotMachine._wrapTiles (slot-machine.js:72) at new SlotMachine (slot-machine.js:40) at secondFunction (tirage.html:133) I think that the slotMachine have to wait until the json is read and added to the HTML but I can't find a way to make it works.

function readTextFile(file, callback) {
	var rawFile = new XMLHttpRequest();
	rawFile.overrideMimeType("application/json");
	rawFile.open("GET", file, true);
	rawFile.onreadystatechange = function() {
	    if (rawFile.readyState === 4 && rawFile.status == "200") {
		callback(rawFile.responseText);
	    }
	}
        rawFile.send(null);
}

async function firstFunction(){
	readTextFile("data.json", function(text){
	var data = JSON.parse(text);
	console.log(data);
	var string ="";
	for (i in data) {
	    string +='<div class="contest text-center" style="width: 100%; height: 100px; display: flex; align-items: center; justify-content: space-around;">'+data[i].name+'<\/div>';
	    };
	document.getElementById('machine1').innerHTML =string
	});    
}

And after

const secondFunction = async () => {
	 const result = await firstFunction()
	const btn = document.querySelector('#randomizeButton');
	const results = {
		machine1: document.querySelector('#machine1Result')
		};
	const el1 = document.querySelector('#machine1');
	const machine1 = new SlotMachine(el1, { active: 0 });

	function onComplete(active){
		results[this.element.id].innerText = `Index: ${this.active}`;
	}

	btn.addEventListener('click', () => {
		machine1.shuffle(5, onComplete);
	});	
}
secondFunction();

What I am doing wrong to load the list from external json ? Best regards