第一次点击不会记录所有信息，但第二次点击会记录

Question

Button wont log everything on first click but does on second click. Pretty much it skips the function that iterate through the object.

Well I've tried putting promises and async await on most function thinking this was the problem, but to no avail.

// button code

const btn = document.querySelector("button");
        btn.disabled = false;
        btn.onclick = function(e) {

          takeASnap()
            .then(toDataURL)
            .then(async function() {
              Object.keys(await returnData).forEach(function(item) {
                console.log(item); // key
                console.log(typeof item);
                console.log(item);

                console.log(returnData[item]); // value
              });
              console.log(await returnData);
            });

        };
      });

HTML

 <div class="window">
 <video></video>
  <button class="snapshot">take a snapshot</button>
 </div>

toDataUrl

async function toDataURL(blob) {
      let reader = new FileReader();
      let b64;
      reader.readAsDataURL(blob);
      reader.onloadend = function() {
        let base64data = reader.result;
        let count = 0;
        let data;

// ChunkSubstr takes thousand character and put into array that is 
// returned
        b64 = chunkSubstr(base64data, 1000);
        console.log("Hllo");
        webSocket(b64);
      };
    }

webSocket function

This is the function that assign the returndata it's value which comes from a server.

async function webSocket(b64) {
      const ws = new WebSocket("ws://192.168.1.70:3000");

      ws.onopen = await function() {
        console.log("Connected");

        b64.forEach(element => {
          ws.send(m_imageNr + " " + element);
          // console.log(element);
        });

        m_imageNr++;

        ws.onmessage = function(event) {
          console.log(typeof returnData);

          returnData.push(event.data);
        };
      };

      return await returnData;
    }

Expected result is that it should iterate through the object on first click but it does only do that on the second click.

EDITTED added some code that was asked for.

Answer 1

refactoring may help:

const btn = document.querySelector("button");
btn.disabled = false;
async function getData() {
   Object.keys(await returnData).forEach(function(item) {
      console.log(item); // key
      console.log(typeof item);
      console.log(item);

      console.log(returnData[item]); // value
   });
   console.log(await returnData);
};

btn.onclick = function(e) {
   takeASnap()
      .then(toDataURL)
      .then(() => await getData());
}