Tengo una función ( createList() ) que crea una matriz a partir de los valores de la base de datos de Firebase y una función que publica la matriz como un objeto HTML ( postList() ).
La matriz que devuelve parece estar bien (ver "matriz devuelta" a continuación) durante la depuración ( console.log(array) ) y puedo ver los valores en el depurador que se muestran correctamente, pero array[0] devuelve "indefinido" y array.length devuelve "0", por lo que no se muestra la lista. ¿Alguna solución?
async createList(){ var composedArray = []; const id = document.getElementById('joinCode').innerHTML; var player_count = null; firebase.database().ref('lobbies/' + id + '/playerCount/').once('value', (snapshot) => { const data = snapshot.val(); player_count = data; }).then(function() { for(var i = 1; i <= player_count; i++){ var iStr = String(i); const player_names_snapshot = firebase.database().ref('lobbies/' + id + '/players/' + iStr); player_names_snapshot.once('value', (snapshot) => { const data = snapshot.val(); composedArray.push(data); }); } }); return composedArray; }, async postList(array){ console.log(array); console.log(array[0]); var list = document.createElement('ul'); for(let i = 0; i < array.length; i++){ var item = document.createElement('li'); item.appendChild(document.createTextNode(array[i])); list.appendChild(item); } const listContainer = document.getElementById('listWrap_players'); this.removeAllChildNodes(listContainer); return list; },La función que llama a estas funciones:
async mountedCall(){ var composedArray = []; composedArray = await this.createList(); document.getElementById('listWrap_players').appendChild(await this.postList(composedArray)); },Matriz devuelta + imagen del depurador en luz: https://prnt.sc/23q4jra
Lo primero que pensé fue que mi "matriz" no es en realidad una matriz y que tal vez he creado un objeto diferente, pero no podía entender por qué, y esto funcionó bien antes de comenzar a migrar la aplicación de Firestore a Realtime. base de datos, así que estoy un poco perdido.
El problema no está en los valores devueltos por la base de datos. Los valores se cargan en la matriz correctamente y a tiempo (la array de parámetros tiene un valor cuando se llama a postList() (como lo demuestra la ejecución correcta de console.log(array) ), pero los valores en la matriz, aunque están allí (ver imagen del depurador) no se puede alcanzar de la manera habitual, a través de un índice ( array[x] ) ni .length devuelve la longitud de la matriz.