Thursday 20 April 2017

Angular delete request button

I created a live pool app where you can create, view and delete questions from the table pools from the rethinkdb database.

The delete is the problem. When I use a DELETE request with POSTMAN, it works, the table is deleted. But when I click on the delete button in Angular, it doesn't do anything. How do I create a DELETE http request ?

This is my delete code that works in the database:

 deletePolls(pollData,callback) {
    async.waterfall([
      function(callback) {
        var pollObject = new db();
        pollObject.connectToDb(function(err,connection) {
          if(err) {
            return callback(true,"Error connecting to database");
          }
          callback(null,connection);
        });
      },
      function(connection,callback) {
        //THIS DELETES THE TABLE FROM THE DATABASE 
        rethinkdb.table('poll').delete().run(connection,function(err,result) {
          connection.close();
          if(err) {
            return callback(true,"Error happens while deleting polls");
          }
          callback(null,result);
        });
      }
    ],function(err,data) {
      callback(err === null ? false : true,data);
    });
  }

This is the button in my index.html, that calls the function delete():

<md-button ng-submit="delete()">Delete the table</md-button> 

This is the function that should delete:

      $scope.delete = function() {
      $http.delete("/polls",data).success(function(response) {
      if(response.responseCode === 0) {
        console.log("Success");
        console.log("IvanUspeh");
        $scope.hiddenrows.push(index);
      } else {
        console.log("error");
      }
    });
  };

Here is the full app.js, the javascript that angular works with:

 var app = angular.module('starterApp', ['ngMaterial','ngRoute','ngMessages']);

app.factory('socket',function(){
  var socket = io.connect('http://localhost:3000');
  return socket;
});

app.config(function($routeProvider){
      $routeProvider
          .when('/',{
                templateUrl: 'home.html'
          })
          .when('/create',{
                templateUrl: 'create.html'
          })
          .when('/view',{
                templateUrl: 'view.html'
          })
          .when('/delete',{ //IGNORE THIS, THIS JUST OPENS AN EMPTY HTML
                templateUrl: 'delete.html'
          })
          ;
});

app.controller('pollingController',function($scope,$mdDialog,$http,socket) {

  $scope.pollData = [];
  $scope.formData = {};
  $scope.voteData = {};
  $scope.hiddenrows = [];
  getPollData();
  function getPollData() {
    $http.get("/polls").success(function(response){
      $scope.pollData = response.data;
    });
  }
  $scope.submitPoll = function(ev) {
    var data = {
      "question" : $scope.formData.pollQuestion,
      "polls" : [{
        "option" : $scope.formData.pollOption1, "vote" : 0
      },{
        "option" : $scope.formData.pollOption2, "vote" : 0
      },{
        "option" : $scope.formData.pollOption3, "vote" : 0
      }]
    };
    var message = {"title" : "", "message" : ""};
    $http.post('/polls',data).success(function(response) {
      if(response.responseCode === 0) {
        message.title = "Uspeh !";
        message.message = "Anketa je uspešno napravljena.";
        data["id"] = response.data.generated_keys[0];
        $scope.pollData.push(data);
      } else {
        message.title = "Greška !";
        message.message = "Greška u toku pravljenja ankete.";
      }
      $mdDialog.show(
        $mdDialog.alert()
          .parent(angular.element(document.querySelector('#popupContainer')))
          .clickOutsideToClose(true)
          .title(message.title)
          .textContent(message.message)
          .ok('Got it!')
          .targetEvent(ev)
      );
    });
  }

  $scope.updateVote = function(index) {
    var data = {
      "id" : $scope.pollData[index].id,
      "option" : $scope.pollData[index].selected
    };
    $http.put("/polls",data).success(function(response) {
      if(response.responseCode === 0) {
        console.log("Success");
        $scope.hiddenrows.push(index);
      } else {
        console.log("error");
      }
    });
  }

  $scope.delete = function() {
      $http.delete("/polls",data).success(function(response) {
      if(response.responseCode === 0) {
        console.log("Success");
        console.log("IvanUspeh");
        $scope.hiddenrows.push(index);
      } else {
        console.log("error");
      }
    });
  };

  socket.on('changeFeed',function(data) {
    for(var pollCounter = 0 ;pollCounter < $scope.pollData.length; pollCounter++) {
      if($scope.pollData[pollCounter].id === data.id) {
        $scope.pollData[pollCounter].polls = data.polls;
        $scope.$apply();
      }
    }
  });
});

So, when I push the button with the function delete(), I want it to delete everything in the table like in POSTMAN, like a http request. What am I doing wrong ?



via IkePr

No comments:

Post a Comment