Básicamente, quería que los datos de JSON fueran accesibles fuera de la función xml, ya que tengo varias funciones para las que quiero usarlos.

Entonces, cuando lo probé por primera vez e intenté registrarlo, mostró las matrices con los objetos en él. Pero cuando hice lo mismo pero verifiqué la longitud, salió como cero. Busqué esto y descubrí que sucede porque ambas funciones se ejecutan sincrónicamente. Así que investigué las promesas y las implementé así:

 let allTasks = [] // Read data const dataPromise = new Promise((resolve, reject)=>{ const xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status ==200) { const myData = JSON.parse(this.responseText) allTasks = allTasks.push.apply(allTasks, myData) resolve() } } xhttp.open("GET", "data.json", true); xhttp.send(); }) dataPromise.then(()=>{ dataUse() }) // Show data dataUse = () =>{ console.log(allTasks) // All variables const todos = document.querySelector('.todo') const todoInput = document.getElementById('new-todo') const added = document.getElementById('added') const itemsLeft = document.querySelector('.items-left > span') allTasks.forEach((datas)=>{ const todo = document.createElement('div') todos.appendChild(todo) const input = document.createElement('input') input.setAttribute('type', 'checkbox') input.setAttribute('id', datas.name) input.setAttribute('class', 'checks') todo.appendChild(input) const label = document.createElement('label') label.setAttribute('for', datas.name) label.setAttribute('class', `${datas.name} tasks`) todo.appendChild(label) const span = document.createElement('span') label.appendChild(span) const paragraph = document.createElement('p') paragraph.innerHTML = datas.todo label.appendChild(paragraph) }) }

Pero ahora, registrarlo me da un número en lugar de la matriz con los objetos, por lo tanto, la función no podrá hacer lo que se supone que debe hacer.

Entonces, ¿cómo soluciono esto?