AngularJS experiencing issues with deleting function implementation

Question

AngularJS experiencing issues with deleting function implementation

Here is my JavaScript code:

camListApp.controller("Hello", function($scope, $http, $uibModal){

    $scope.del=function(data){

        var result=confirm('are you sure?');
        if(result==true){
        var index=getSelectedIndex(data);
        $scope.records.splice(index, 1);
        }
        };
        function getSelectedIndex(data) {
        for (var i =0; i<$scope.records.length; i++)
        if($scope.records[i].data==data)
        return i;
        return -1;
        }

This is the HTML code snippet:

  <td><button class="btn" ng-click="del(record.filename)">Delete</button></td>

This is my JSON data:

[{"cameraid":"000000001","timestamp":"2016-07-09 10:06","filename":"c037731fc2256177ba29c7893caacf04","locationid":"Bedok01"}   
{"cameraid":"000000003","timestamp":"2016-07-13 11:35","filename":"4fd2413d30073b4b6a5cacbb8b7c1965","locationid":"Bedok01"} 
{"cameraid":"000000003","timestamp":"2016-07-13 14:41","filename":"6b6b62948eb679efeb650d609c85b7aa","locationid":"Bedok01"}

I am trying to implement a delete function in AngularJS that will remove a record when a button is clicked. I also want MongoDB to delete the corresponding data simultaneously. Any assistance on how I can achieve this?

javascript angularjs spring mongodb

Answer 1

Answer №1

To start, the first step is to establish an endpoint on your server. MongoDB serves as a database that can be accessed from your backend by setting up a controller or another similar method. Once this is completed, you can initiate an API call to the designated endpoint.

 $scope.remove = function(data) {
       $http.post('/items/' + data.id + '/remove')
        .then(function(){
           .... include the remainder of your AngularJS code here
       })
   };

Answer 2

To start, the first step is to establish an endpoint on your server. MongoDB serves as a database that can be accessed from your backend by setting up a controller or another similar method. Once this is completed, you can initiate an API call to the designated endpoint.

 $scope.remove = function(data) {
       $http.post('/items/' + data.id + '/remove')
        .then(function(){
           .... include the remainder of your AngularJS code here
       })
   };

Answer 3

Answer №2

Perform an HTTP request to delete data from the database and then remove the specified object from the list by using the splice method as illustrated below:

<td><button class="btn" ng-click="removeItem(item)">Delete</button></td>

$scope.removeItem = function(item) {
var index = $scope.items.indexOf(item);
$scope.items.splice(index , 1);
    $scope.updateList();
};

Answer 4

Perform an HTTP request to delete data from the database and then remove the specified object from the list by using the splice method as illustrated below:

<td><button class="btn" ng-click="removeItem(item)">Delete</button></td>

$scope.removeItem = function(item) {
var index = $scope.items.indexOf(item);
$scope.items.splice(index , 1);
    $scope.updateList();
};

AngularJS experiencing issues with deleting function implementation

Answer №1

Answer №2

Similar questions

The server's file URLs are modified within the page source of a WordPress site

When the enter key is pressed in a contenteditable div, line breaks are disregarded

Send user a notification upon detecting changes in the database - using JavaScript and AJAX!

Issues with the initial calculator project I built using JavaScript (excluding HTML and CSS)

The border of the Material UI Toggle Button is not appearing

Exploring the potential of nested arrays within checkbox inputs

Simple method for converting pixel values to em units

Simple HTML files on a local server are having trouble loading images and JavaScript, yet the CSS is loading

Unable to sort the list items when utilizing the load() function

Error message encountered: 'GlobalStyles' is not a valid export from the module '@material-ui/system' (referenced as 'SystemGlobalStyles')

Several functions linked to a single prop in Vue

Angular 2: Harnessing the power of Observables with multiple Events or Event Handlers

A controller in Angular.js that leverages several different services

Select state and city options similar to the national breakdown page

Solving the challenge of converting images to text using react-native and the @react-native-ml-kit/text-recognition package

Enhancing a node.js application with express()

Phonegap and the Importance of HTTP Requests

Ways to maintain uniform size in displaying images even when they are of different dimensions

Check for a rapid return if the function ends up returning null in JavaScript

Storing an array of JSON objects in separate rows within an SQL database table