How can I change the priority for calls in my parse server in javascript?

Question

I'm building a webfrontend and the user should be able to select some pictures and delete all of them at a time. So I'm trying it with this:

function deletePic(){
    var inputs = document.querySelectorAll("input[type='checkbox']");
    var PicsForDelete =[];

    for(var i = 0; i < inputs.length; i++) {
        if(inputs[i].checked == true){
            userPics_query.get(inputs[i].id, {
                 success: function(picForDelete) {
                   PicsForDelete.push(picForDelete);
                   alert(picForDelete.id +" " + PicsForDelete[i]);
                 },
                 error: function(picForDelete, error) {
                   alert("Error: " + error.code + " " + error.message);
                 }
            });
        }
    }

    destroyItAll(PicsForDelete);
}

function destroyItAll(PicsForDelete){
    if(confirm("Press 'OK' to delete "+PicsForDelete.length +" pictures!")){
        Parse.Object.destroyAll(PicsForDelete,{
            success: function(myObject) {
                alert(PicsForDelete.length + " Images successfully deleted!");
            },
            error: function(myObject, error) {
                alert("Error: " + error.code + " " + error.message);
            }
        });
    }
}

The problem is that my script always want FIRST to destroy them all and THEN try to get the objects out of my DB. So it doesn't delete anything.

So my question is, how can I change the priority call for my parse server?

score 1 · Answer 1 · answered Jan 23 '18 at 10:49

You need to handle the asynchronous nature of get requests. The easiest solution is to wrap your calls in a Promise, counting the tasks and resolve the Promise when all tasks are done.

I don't have all your code, so this is pseudo code, but it should illustrate the point:

function deletePic() {
  var inputs = document.querySelectorAll("input[type='checkbox']");
  var PicsForDelete = [];
  // Promise
  var promise = new Promise(function(resolve, reject) {
    var fetching = 0;
    for (var i = 0; i < inputs.length; i++) {
      if (inputs[i].checked == true) {
        //Count asynchronous tasks
        fetching++;
        userPics_query.get(inputs[i].id, {
          success: function(picForDelete) {
            PicsForDelete.push(picForDelete);
            alert(picForDelete.id + " " + PicsForDelete[i]);
            //Mark asynchronous task as done
            fetching--;
            //If all tasks done, resolve
            if (fetching == 0) {
              resolve();
            }
          },
          error: function(picForDelete, error) {
            alert("Error: " + error.code + " " + error.message);
          }
        });
      }
    }
    //If no tasks registered, resolve immidiately
    if (fetching == 0) {
      resolve();
    }
  }).then(function() {
    //When all asynchronous tasks is completed, call "destroyItAll"
    destroyItAll(PicsForDelete);
  });
}

the rest of the code was not important but yeah your pseudo code working. I have an other question to this: The problem is, that the "userPics_query.get" command get executed after the loop finished. I think I also have to handle it asynchronyosly. Do u maybe have an idea how I can do this? — timetosmile, Jan 23 '18 at 18:40

score 1 · Accepted Answer · answered Jan 23 '18 at 10:57

1

Use Promises for handle the requests. An AJAX request is async, so you must handle it asynchronyosly

var imgPromises = [];
for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].checked == true){
        var imgForDelPromise = new Promise(function (resolve) {
            userPics_query.get(inputs[i].id, {
                success: function(picForDelete) {
                    resolve(picForDelete);
                },
                error: function(picForDelete, error) {
                    alert("Error: " + error.code + " " + error.message);
                }
            });
        });
        imgPromises.push(imgForDelPromise);
    }
}

Promise.all(imgPromises).then(function (imgs) {
    destroyItAll(imgs);
});

answered Jan 23 '18 at 10:57

oleksandr

66
3

Thank your for your fast respond. Both answers are working. BUT it deletes the last selected item. Do you mayby know where this could come from? – timetosmile Jan 23 '18 at 11:10
no, i don't. It's pseudo code, same like first answer. It just illustrate the point. – oleksandr Jan 23 '18 at 11:24
I got it. The problem is, that the get command also get executed after the loop finished. I think I also have to handle it asynchronyosly. Do u maybe have an idea how I can do this? – timetosmile Jan 23 '18 at 18:38
both solution exactly for handle async `.get` command. If you have some problem you should create demo with this problem on jsfiddle. – oleksandr Jan 24 '18 at 09:44

How can I change the priority for calls in my parse server in javascript?

2 Answers2

Linked