Delete/Update multiple rows/items/posts with one ajax call

Ember Data
1

Hello guys, I’m new to Ember and Ember-Data. I have the following issue: I have a list of records with checkboxes and the user is available to select one or multiple rows and to trigger the action by clicking the Update/Delete button. When that happens the update/delete action is triggered in the controller. What I need is to pick every row ( which is a record in the model ) and to send only ONE call to the server with json containing information for every row. I know how to do that if I made a custom ajax function, but is there a way to do it using build-in functionality?

2

Hi ,

For me (but i’m new too …) see ember-json-api. This convention allow you to update/delete several resource objects

add-on here https://github.com/kurko/ember-json-api

Michael

3

Hello Mestr, were you ever able to get this to work? I have the same functionality, that its not quite working.

4

Hello Fernanda, I made a custom ajax call

5

would you mind sharing that?

deleteSelectedUsers() {
  const selectedUsers = this.get('selectedUsers');
  const userId = this.get('selectedUsers').mapBy('id');

userId.forEach((item) => {
    this.get('ajax').request(`/api/v1/users/${item}`, {
      method: 'DELETE',
      data: { userId: item}
    }).then(() => {
      selectedUsers.forEach((d) => d.unloadRecord());
      selectedUsers.clear();
      this.set('confirmDelete', false);
      this.flashMessages.success('Users deleted');
    })
    .catch((err) => {
    });
  });
},

This is what I have, and it makes an ajax call for each of the record selected. I would like to wrap all the idea in one call and then do the success messages if ALL records weere deleted.

6

Actually, I don’t have access to that code, but what you can do is:

deleteSelectedUsers() {
  const selectedUsers = this.get('selectedUsers');
  const ids = this.get('selectedUsers').mapBy('id');
  this.get('ajax').request(`/api/v1/users/`, {
    method: 'DELETE',
    data: { ids: ids}
  }).then(() => {
    // code
  })
  .catch((err) => {
    // code
  });
},
7

Thanks Mestr, I will give that a try!