Using .each to delete all items by id using AJAX

Question

Is it even possible to bulk delete items from a server with ajax? I am at a complete loss here.

I am trying to run an each function to pull the url id for each item on my server and then plug it into a ajax delete type call. This makes sense to me, but I am still new at programming and I feel like I could be miles off.

Any amount of insight on this would be a huge help. Thanks.

$('#delete-friends').on('click', function() {
  $.ajax({
    type: 'GET',
    url: 'http://rest.learncode.academy/api/johnbob/friends',
    success: function(friends) {
      var scratchFriend = $.each(friends, function(i, friend) {
        var friendID = (friend.id);
        console.log(friendID);

        $ajax({
          type: 'DELETE',
          url: 'http://rest.learncode.academy/api/johnbob/friends/'
          friendID ','
          success: function() {
            console.log('Friend Deleted Successfully!');
          }
        });
      });
    }
  });
});

#delete-friends {
  position: absolute;
  top: 10%;
  left: 70%;
  font-size: 20px;
  border-radius: 10px;
}

<div class="friendForm">
  <button id="delete-friends">Delete all of the friends?</button>
  <h4>Be a friend</h4>
  <p>Name:
    <input type='text' id='name'>
  </p>
  <p>Age:
    <input type='text' id='age'>
  </p>
  <button id="add-friend">Join us Friend</button>

</div>

Try `url: 'http://rest.learncode.academy/api/johnbob/friends/' + friendID,` in your `DELETE` `Ajax` request. — D4V1D, Jul 24 '15 at 07:46
You can also pass multiple parameters in a single DELETE request too . Refer this http://stackoverflow.com/questions/15088955/how-to-pass-data-in-the-ajax-delete-request-other-than-headers — Utkarsh, Jul 24 '15 at 07:51

prototype · Answer 1 · 2015-07-24T12:36:09.007

I think it's better to send an array of friend ids to the backend - you'll just need to tweak the backend a bit:

$('#delete-friends').on('click', function() {
  $.ajax({
    type: 'GET',
    url: 'http://rest.learncode.academy/api/johnbob/friends',
    success: function(friends) {
      if (!friends) {
          return;
      }

      var friendIds = [];

      $.each(friends, function(i, friend) {
        friendIds.push(friend.id);   
      });

      $ajax({
          type: 'POST',
          url: 'http://rest.learncode.academy/api/johnbob/friends/'
          data: {
            friendIds: friendIds
          },
          success: function() {
            console.log('Friend Deleted Successfully!');
          }
      });

    }
  });
});

Or even better - create a delete method which will take a user and delete all his friends:

    $('#delete-friends').on('click', function() {
      $.ajax({
        type: 'POST',
        url: 'http://rest.learncode.academy/api/delete/friends',
        data: {
            user: 'johnbob'
        },
        success: function(data) {
          if (!data) {
              return;
          }

          console.log(data);
        }
      });
    });

But I'm guessing you are using the http://rest.learncode.academy/ API so you can't really change the backend.

From what I can see in the docs at learncode you can append the id of the friend in the url to delete it. This should do the trick:

        // -- SAME CODE FROM ANSWER --
        $ajax({
          type: 'DELETE',
          url: 'http://rest.learncode.academy/api/johnbob/friends/' + friendID
          success: function() {
            console.log('Friend Deleted Successfully!');
          }
        });
        // -- SAME CODE FROM ANSWER --

Yeah manipulating the backend isn't really an option. I would have to do it through an ajax call. — Thomas Valadez, Jul 24 '15 at 08:34

score 0 · Answer 2 · answered Jul 24 '15 at 07:57

Usually the server has a bulk delete function where you pass all ids you want to delete. Deleteing them one by one is a bit much traffic because for every id/request you send to the server you send also meta information about the request, which would be redundant. You could reduce this request to one by sending all ids.

Using .each to delete all items by id using AJAX

2 Answers2