Promise in background sync

Question

I have a promise which return an array of objects from IndexedDB:

const syncData = () => {
  return new Promise((resolve, reject)=>{
      var all_form_obj = [];
      var db = self.indexedDB.open('Test');
      db.onsuccess = function(event) {
          var db = this.result
          // Table new_form
          var count_object_store_new_form = this.result.transaction("new_form").objectStore("new_form").count()
          count_object_store_new_form.onsuccess = function(event) {
              if(count_object_store_new_form.result > 0){
                  db.transaction("new_form").objectStore("new_form").getAll().onsuccess = function(event) {
                    var old_form_arr = event.target.result
                    for(element in old_form_arr){
                        all_form_obj.push(old_form_arr[element])
                    }
                  }
              }
          }
          // Table old_form
          var count_object_store_old_form = this.result.transaction("old_form").objectStore("old_form").count()
          count_object_store_old_form.onsuccess = function(event) {
            if(count_object_store_old_form.result > 0){
              db.transaction("old_form").objectStore("old_form").getAll().onsuccess = function(event) {
                var old_form_arr = event.target.result
                for(element in old_form_arr){
                    all_form_obj.push(old_form_arr[element])
                }
              }
            }
          }
      }

      db.onerror = function(err) {
        reject(err);
      }
      resolve(all_form_obj)
  })
};

After I resolve my array, I call the promise in the sync event:

self.addEventListener('sync', function(event) {
  if (event.tag == 'sync_event') {
    event.waitUntil(
      syncData()
      .then((form_arr)=>{
        console.log(form_arr)
        for(form in form_arr) {
          console.log(form_arr)
        }
    }).catch((err) => console.log(err))
    );
  }
});

In the 'then' of my promise syncData I print to the console two times.
The first console.log appears in the console (my array of objects) but the second which is in loop (for in) doesn't appear in the console and I don't understand why.
My goal is to be able to loop through each object and send it to my database with fetch but the problem is that the code in the loop doesn't run.

My result of the first console log:

Answer 1

I think resolve is not placed in the desired place and the reason why the 2nd console.log is not showing up is because form_arr is []. I simplified your code to demonstrate why it went []. db.onsuccess and db.onerror were just defined there without being called. To fix this problem, you may want to place resolve inside db.onsuccess and reject inside db.onerror.

const syncData = () => {
  return new Promise((resolve, reject)=>{
      var all_form_obj = [];
      var db = self.indexedDB.open('Test');
      db.onsuccess = function(event) {
        // ... will be called async

        resolve(all_form_obj)
      }

      db.onerror = function(err) {
        // ... will be called async
      }

      // remove resolve here
  })
};