Level 22
You could have a POST route that accepts an array of ids and delete them all at once.
1 like
Sep 6, 2015
5
Level 2
VueJS: Delete multiple tasks. Each task one request?
Please review my code. I am rebuilding Jeffrey's TaskApp and I have a "Clear Completed" Button that does this:
clearCompleted: function () {
var that = this;
var toBeClearedTasks = this.tasks.filter(function (task) {
return task.completed;
});
toBeClearedTasks.forEach(function (task) {
that.$http.delete('/api/tasks/' + task.id, task);
});
this.tasks = this.tasks.filter(function (task) {
return !task.completed;
});
}
As you can see, I have a forEach loop, that loops through each completed task, that should be deleted through a http request.
Works fine for a small number of tasks. But when I Complete All tasks and then immediately Clear All Completed and then refresh the page. The tasks are still there. If I wait a couple of seconds for the requests to be complete, it works fine again.
Is there a way to use something like a queue? Or is there a way to send a single request and then use the foreach loop on the server? How were you going to solve a problem, where you maybe have hundreds of tasks that you want to delete. Firing for each and single one a delete request?
EDIT: Also how would you refactor the code?
Level 50
@LoveAndHappiness What I would do and many people follow that approach, is having a URL such as api/tasks/1,2,50,1,3 and in your controller just use the explode method to have an array.
1 like
Level 2
Thanks. I haven't figured out yet exactly how that looks like, but I will research it and get back to you.
Level 2
clearCompleted: function () {
var taskIds = []; /* Get ids of tasks you want to delete */
this.$http.delete('/api/tasks', { taskIds: taskIds })
.success(function (response) {
// Do stuff
})
.error(function (response) {
// Err
});
}
/* TaskController.php */
public function delete(Request $request)
{
return Task::whereIn('id', $request->get('taskIds'))->delete();
}
2 likes
Level 2
I tried to implement several suggestions from this thread. All failed at the moment.
1st Suggestion:
Send ids:
completeAll: function () {
var tasks = [];
var taskIds = [];
this.tasks = this.tasks.filter(function (task) {
task.completed = true;
tasks.push(task);
taskIds.push(task.id);
return task.completed;
});
this.$http.put('api/tasks/' + taskIds, { tasks: tasks });
},
But I couldn't make the foreach loop work till now to UPDATE the tasks. Can we please first start focusing on the "completeAll" method and how I would update the tasks. Or would you just create another endpoint to the api? I would rather use the endpoints I already have.
Here is the stackoverflow ticket:
http://stackoverflow.com/questions/32508850/laravel-5-updating-multiple-records
Thanks for your help.
Please or to participate in this conversation.