AngularJS $http.delete not working in Azure App Service

Question

A follow-up on a similar question I posted yesterday. I am trying to delete data from a table in Azure App service. This is my function in my Angular file.

function delName(user) {
 //$scope.categories.push(user);
 alert("about to delete. Action cannot be undone. Continue?")
 $http.delete('https://test-evangelists-1.azurewebsites.net/tables/people', user, config)
   .then(function (res) {
       $scope.getNames();
   });
}

Then I added an HTML button:

<button id="btn-del-evangelist" class="btn btn-default btn" ng-click="delName(user);">Delete User</button>

This is the value of my headers variable:

var config = {
    headers: {
        'Access-Control-Allow-Origin':'*',
        'ZUMO-API-VERSION': '2.0.0'
    }
};

But when I tried to run it, the console returns the following error:

which states that the header for ZUMO-API-VERSION must be specified.

Below is my code for GET and POST

GET:

    function getNames() {
      $http.get('https://test-evangelists-1.azurewebsites.net/tables/people', config)
   .then(function (res) {
       console.log(res);
       $scope.people = res.data;
   });
  }

POST

 function addName(user){
     //$scope.categories.push(user);
     alert("about to post!")
     $http.post('https://test-evangelists-1.azurewebsites.net/tables/people', user, config)
       .then(function (res) {
           $scope.getNames();
       });
 }

Since I have already specified the header in my variable, I wonder what can be wrong here. Any help will be appreciated.

UPDATE: I figured out that the Id must be appended to the URL before I can perform delete. However, I need to run a GET to retrieve the ID given the parameters but I am still encountering errors when getting the ID.

This is now my Delete function

 function delName(user) {

     alert("About to delete. Action cannot be undone. Continue?")
     var retrievedId = "";

     $http.get('https://test-evangelists-1.azurewebsites.net/tables/people', {
         params: { name: user.name, location: user.location },
         headers: { 'Access-Control-Allow-Origin': '*', 'ZUMO-API-VERSION': '2.0.0' }
     })
        .then(function (res) {
            retrievedId = res.id;
            alert(retrievedId);
        });


     $http.delete('https://test-evangelists-1.azurewebsites.net/tables/people/' + retrievedId, config)
       .then(function (res) {
           $scope.getNames();
       });

 }

Does anyone know what is wrong in the GET command when getting the ID?

UPDATE 2: I have written instead an Web Method (asmx) that will connect to SQL server to retrieve the ID passing the needed parameters. The ID will be returned as a string literal but in JSON format. Then I called JSON.parse to parse the string into JSON object then assigned the ID to a variable to which I appended in the URL. –

This is now my Delete function after I have written the Web Method.

 function delName(user) {
        var confirmres = confirm("You are about to delete this record. Action cannot be undone. Continue?");
        var retrievedId = "";

        if (confirmres == true) {
            //get the ID via web service
            $http.get('\\angular\\EvangelistsWebService.asmx/GetId', {
                params: { name: user.name, location: user.location },
                headers: { 'Access-Control-Allow-Origin': '*', 'ZUMO-API-VERSION': '2.0.0' },
                dataType: "json",
                contentType: "application/json; charset=utf-8"
            })
               .then(function (res) {
                   $scope.retData = res.data;
                   var obj = JSON.parse($scope.retData);
                   angular.forEach(obj, function (item) {
                       if (item.length == 0)
                           alert('No data found');
                       else {
                           //perform delete after getting the ID and append it to url
                           $http.delete('https://test-evangelists-1.azurewebsites.net/tables/people/' + item.id, config)
                             .then(function (res) {
                                 $scope.getNames();
                             });
                           alert(item.id + ' deleted');
                       }
                   });
               });
        }
    }

That is one way that I have learned on how to call HTTP DELETE on AngularJS. But I don't know if that is the optimal one. In any case, that works for me, unless there will be other suggestions.

Answer 1

$http.delete only has one parameter (config), not two (data, config).

Delete API

delete(url, [config]);

vs.

Post API

post(url, data, [config]);

---

To your updated problem:

To delete an item from your table, it appears the correct url is:

 /tables/tablename/:id

Note the : before id.