1
async postList(arr){
                console.log(arr);
                console.log(arr[0]);

Debugger + console picture: https://prnt.sc/23q4jra

as seen in the picture of the debugger console.log(arr) returns an array with a value in the [0] position, the very next line arr[0] returns "undefined" and arr.length returns "0"

how is it possible?

the function that calls this function:

    async mountedCall(){
        var composedArray = await this.createList();
        document.getElementById('listWrap_players').appendChild(await this.postList(composedArray));
    },

createList():

async createList(){
        var composedArray = [];
        const id = document.getElementById('joinCode').innerHTML;
        var player_count = null;
        await 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);
                    }).then(function(){return;});
                }
            });
        this.isLeader(id);
        return composedArray;
    },

UPDATE:

Tried to replace console.log with console.log(JSON.stringify(arr)) as suggested below console.log(JSON.stringify(arr)) returns an empty array so I think it means I have synchronization problem in createList() or in mountedCall(), yet I cant seem to find it. I've used await and .then() in every location possible...

here are all the functions together:

    async mountedCall(){
        var composedArray = await this.createList();
        document.getElementById('listWrap_players').appendChild(await this.postList(composedArray));
    },

    async removeAllChildNodes(list) {
                while(list.firstChild){
                    list.removeChild(list.firstChild);
                }
    },

    async postList(arr){
                console.log(JSON.stringify(arr));
                console.log(arr[0]);
                var list = document.createElement('ul');
                for(let i = 0; i < arr.length; i++){
                    var item = document.createElement('li');
                    item.appendChild(document.createTextNode(arr[i]));
                    list.appendChild(item);
                }
                const listContainer = document.getElementById('listWrap_players');
                this.removeAllChildNodes(listContainer);
                return list;
    },
    
    async createList(){
        var composedArray = [];
        const id = document.getElementById('joinCode').innerHTML;
        var player_count = null;
        await 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);
                    }).then(function(){return;});
                }
            });
        return composedArray;
    },
Sagie Z
  • 11
  • 2
  • 2
    Can you please show `createList()`. You're probably experiencing: https://stackoverflow.com/questions/4057440/is-chromes-javascript-console-lazy-about-evaluating-arrays – Nick Parsons Dec 21 '21 at 00:07
  • edited the post to include createList() – Sagie Z Dec 21 '21 at 00:10
  • 1
    Logging objects / arrays in Chrome will live-update them if they change. You can use `console.log(JSON.stringify(arr));` to see the contents at the time of the log. –  Dec 21 '21 at 00:12
  • 1
    Also remember that `console.log` _is not synchronous_ in the slightest. If you want to log the actual array as it exist at the time when you invoke `console.log`, you'll have to create a copy of the array so that even if the original array gets modified, the console log will still log "what it looked like when you invoked the log operation". E.g. `console.log(arr.slice())` – Mike 'Pomax' Kamermans Dec 21 '21 at 00:12
  • also, console.log was only used here to debug - arr[0] and arr.lenght didnt work inside createList() so i've added console.log to see where the problem is, so I think its probably not a a problem related only to console.log – Sagie Z Dec 21 '21 at 00:13
  • console.log(JSON.stringify(arr)); returns an empty array so I think it means I have synchronization problem in createList() or in mountedCall() yet I cant seem to find it ive used await and .then() in every location possible... – Sagie Z Dec 21 '21 at 00:18
  • What's the point of `.then(function(){return;})`? – Blindy Dec 21 '21 at 00:23
  • Tried to return composedArray from there earlier, I thought it might solve the sinchronization problem, but it didnt seem to work as its a nested function of createList() – Sagie Z Dec 21 '21 at 00:29

0 Answers0