Encountering a problem with CRUD operations when attempting to edit and save data from a table using

Question

Encountering a problem with CRUD operations when attempting to edit and save data from a table using

When attempting to edit the information by clicking the radio button, the details are displayed in the appropriate boxes but the existing data in the table is deleted. My goal is to utilize a single array/scope variable for editing, displaying, and deleting without using loops for edit/delete operations. Although I made some changes, it still doesn't work properly. Below is my HTML index.html:

<div ng-controller="employeeController">
    <header><h1>Employee Details</h1></header>

    <form name="myForm" novalidate>
        <table id="myTable" cellspacing="0" cellpadding="4">
            <tr>
                <td><label> Employee Id </Label></td>
                <td><input type="text" name="eid" data-ng-model="employees.EmployeeId" data-ng-required="true" ng-disabled="newEmployees"/></td>
            </tr>
            <tr>
                <td><label> FirstName </Label></td>
                <td><input type="text" name="fname" data-ng-model="employees.FirstName" data-ng-required="true"/></td>
            </tr>
            <tr>
                <td><label> LastName </Label></td>
                <td><input type="text" name="lname" data-ng-model="employees.LastName" data-ng-required="true"/></td>
            </tr>
            <tr>
                <td><label> Gender </Label></td>
                <td>
                    <input type="radio" name="gender" data-ng-change="employees.Gender" value ="Male" data-ng-model="employees.Gender"/> Male
                    <input type="radio" name="gender" data-ng-change="employees.Gender" value ="Female" data-ng-model="employees.Gender"/>Female
                </td>
            </tr>
            <tr>
                <td><label> Email </Label></td>
                <td><input type="text" name="email" data-ng-model="employees.Email" data-ng-required="true"/></td>
            </tr>
            <tr>
                <td><label> Account </Label></td>
                <td><input type="text" name="account" data-ng-model="employees.Account" data-ng-required="true"/></td>
            </tr>
            <tr>
                <td><input type="hidden" data-ng-model="employees.EmployeeId"></td>
            </tr>
        </table>
        <button name="btnSave" data-ng-click="saveEmployeeRecord(employees)" class="userbutton">Save</button>
        <button name="btnReset" data-ng-click="resetEmployeeRecord()" class="userbutton">Reset</button>
    </form> 

    <table border="2" cellspacing="0" cellpadding="4">
        <tr style="color: blue">
            <th style="width:100px">Employee Id</th>
            <th style="width:150px">FirstName</th>
            <th style="width:150px">LastName</th>
            <th style="width:90px">Gender</th>
            <th style="width:150px">Email</th>
            <th style="width:60px">Account</th>
            <th>Action</th>
        </tr>
       <tr style="color:green" data-ng-repeat="emp in employees">
           <td>{{emp.EmployeeId}}</td>
           <td>{{emp.FirstName}}</td>
           <td>{{emp.LastName}}</td>
           <td>{{emp.Gender}}</td>
           <td>{{emp.Email}}</td>
           <td>{{emp.Account}}</td>
           <td>
               <input type="radio" name="process" data-ng-click="editEmployee(emp, employees.indexOf(emp))"> Edit
               <input type="radio" name="process" data-ng-click="DeleteEmployee(employees.indexOf(emp))"> Delete
           </td>
       </tr>
   </table>
</div>

Javascript app.js

var employeeApp = angular.module("myApp",[]);

employeeApp.controller("employeeController", function($rootScope, $scope, $http) {

            $http.get('data/employees.json').success(function(data) {

                $rootScope.employees = data;
            }); 

            var empId = 12342;
            $rootScope.saveEmployeeRecord = function(emp) {
                if($rootScope.employees.EmployeeId == null) {
                    $rootScope.employees.EmployeeId = empId++;
                    $rootScope.employees.push(emp);
                }
                else {
                    for(i in $rootScope.employees) {
                        if($rootScope.employees[i].EmployeeId == emp.EmployeeId) { 
                            $rootScope.employees[i]= emp;
                        }
                    }
                }

                //$rootScope.employees = {};
            }

            $rootScope.resetEmployeeRecord = function() {
                angular.copy({}, $rootScope.employees);
            }

            $rootScope.editEmployee = function(emp, indx) {

                    //$rootScope.emp = $rootScope.employees;
                    if($rootScope.employees[indx].EmployeeId == emp.EmployeeId) { 
                        $rootScope.employees = angular.copy($rootScope.employees[indx]);
                    }


            }

            $rootScope.DeleteEmployee = function(idx) {

                var result = confirm("Are you sure want to delete?");
                if (result) {
                    $rootScope.employees.splice(idx,1);
                    return true;
                }
                else {
                     return false;
                }

                //for(i in $rootScope.employees) {
                    //if($rootScope.employees[i].EmployeeId == idx) { 

                        //$rootScope.employees = {};
                    //}
                //}
            }

});

employees.json file:

[
            {
                "EmployeeId": "61234",
                "LastName": "Anderson",
                "FirstName": "James",
                "Gender": "Male",
                "Email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="315b505c54426e505f555443425e5f71585f575e4248421f525e5c">[email protected]</a>",
                "Account": "Boeing"
            },
            {
                "EmployeeId": "512458",
                "LastName": "Cambell",
                "FirstName": "Mike",
                "Gender": "Male",
                "Email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e1317151b501d1f131c1b12123e171018110d070d501d1113">[email protected]</a>",
                "Account": "Boeing"
            },
            {
                "EmployeeId": "712785",
                "LastName": "Swachengar",
                "FirstName": "Andrew",
                "Gender": "Male",
                "Email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9a8a7adbbacbee7babea8aaa1aca7aea8bb89a0a7afa6bab0bae7aaa6a4">[email protected]</a>",
                "Account": "Cisco"
            },
            {
                "EmployeeId": "712734",
                "LastName": "Anderson",
                "FirstName": "James",
                "Gender": "Male",
                "Email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1aba0aca4b2efa0afa5a4b3b2aeaf81a8afa7aeb2b8b2efa2aeac">[email protected]</a>",
                "Account": "Apple"
            },
            {
                "EmployeeId": "61245",
                "LastName": "Green",
                "FirstName": "Rachael",
                "Gender": "Female",
                "Email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aad8cbc9c2cbcfc6f5cdd8cfcfc4eac3c4ccc5d9d3d984c9c5c7">[email protected]</a>",
                "Account": "Boeing"
            },
            {
                "EmployeeId": "61347",
                "LastName": "Brown",
                "FirstName": "Jackualine",
                "Gender": "Female",
                "Email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa909b99918f9b9693949fa59888958d94ba93949c95898389d4999597">[email protected]</a>",
                "Account": "Boeing"
            }
]

javascript angularjs

Answer 1

Answer №1

To ensure the selected item is properly assigned to a model for association in your edit/save form, you must update the original data with the new data when the "save" button is clicked. Consider this approach:

        $scope.saveEmployee = function() {
            for(key in $scope.selectedEmployee){
             $scope.selectedEmployee[key] = $scope.selectedEmployeeCopy[key];
            }
        }

        $scope.resetEmployee = function() {
            $scope.selectedEmployeeCopy = null;
        }


        $scope.editSelectedEmployee = function(employee) {
            $scope.selectedEmployee = employee;
            $scope.selectedEmployeeCopy = angular.copy($scope.selectedEmployee);
        }

In this example, I duplicate the original employee object before making any updates. After saving, the duplicated version replaces the original. If changes are discarded, the duplicate is simply disregarded. Check out a live demo demonstrating this concept.

Edit: Following feedback, refined the save and delete methods that weren't functioning correctly. JSFiddle has also been updated. Edit2: Replaced for loops with indexing array elements for efficiency

    $scope.saveEmployee = function() {
            $scope.employees.splice($scope.selectedIndex, 1, $scope.selectedEmployeeCopy);
        }

        $scope.resetEmployee = function() {
            $scope.selectedEmployeeCopy = null;
            $scope.selectedIndex = null;
        }

        $scope.editSelectedEmployee = function(emp, index) {
            $scope.selectedIndex = index;
            $scope.selectedEmployee = emp;
            $scope.selectedEmployeeCopy = angular.copy($scope.selectedEmployee);
        }

        $scope.deleteEmployee = function(emp, index) {

            var confirmation = confirm("Are you sure you want to delete?");
            if (confirmation) {                    
                $scope.employees.splice(index, 1);
                $scope.selectedEmployeeCopy = null;
                $scope.selectedIndex = null;
                return true;
            }
            else {
                 return false;
            }
        }

Answer 2

To ensure the selected item is properly assigned to a model for association in your edit/save form, you must update the original data with the new data when the "save" button is clicked. Consider this approach:

        $scope.saveEmployee = function() {
            for(key in $scope.selectedEmployee){
             $scope.selectedEmployee[key] = $scope.selectedEmployeeCopy[key];
            }
        }

        $scope.resetEmployee = function() {
            $scope.selectedEmployeeCopy = null;
        }


        $scope.editSelectedEmployee = function(employee) {
            $scope.selectedEmployee = employee;
            $scope.selectedEmployeeCopy = angular.copy($scope.selectedEmployee);
        }

In this example, I duplicate the original employee object before making any updates. After saving, the duplicated version replaces the original. If changes are discarded, the duplicate is simply disregarded. Check out a live demo demonstrating this concept.

Edit: Following feedback, refined the save and delete methods that weren't functioning correctly. JSFiddle has also been updated. Edit2: Replaced for loops with indexing array elements for efficiency

    $scope.saveEmployee = function() {
            $scope.employees.splice($scope.selectedIndex, 1, $scope.selectedEmployeeCopy);
        }

        $scope.resetEmployee = function() {
            $scope.selectedEmployeeCopy = null;
            $scope.selectedIndex = null;
        }

        $scope.editSelectedEmployee = function(emp, index) {
            $scope.selectedIndex = index;
            $scope.selectedEmployee = emp;
            $scope.selectedEmployeeCopy = angular.copy($scope.selectedEmployee);
        }

        $scope.deleteEmployee = function(emp, index) {

            var confirmation = confirm("Are you sure you want to delete?");
            if (confirmation) {                    
                $scope.employees.splice(index, 1);
                $scope.selectedEmployeeCopy = null;
                $scope.selectedIndex = null;
                return true;
            }
            else {
                 return false;
            }
        }

Answer 3

Answer №2

If you want to include an id along with your index in a radio button, you can do so like this:

<button class="btn btn-default" ng-click="editBook(add.id, $index);" type="submit">Edit</button>

Here is an example of how it can be implemented in the controller:

$scope.editBook = function(id, index) {
   $scope.show1=false;
   $scope.show=true;
   $http.get(appurl + 'user/adds/' + id + '.json')
        .success(function(data, status, headers, config) {
            $scope.user= data; 
            angular.copy($scope.user, $scope.copy);
        });
};

Answer 4

If you want to include an id along with your index in a radio button, you can do so like this:

<button class="btn btn-default" ng-click="editBook(add.id, $index);" type="submit">Edit</button>

Here is an example of how it can be implemented in the controller:

$scope.editBook = function(id, index) {
   $scope.show1=false;
   $scope.show=true;
   $http.get(appurl + 'user/adds/' + id + '.json')
        .success(function(data, status, headers, config) {
            $scope.user= data; 
            angular.copy($scope.user, $scope.copy);
        });
};

Encountering a problem with CRUD operations when attempting to edit and save data from a table using

Answer №1

Answer №2

Similar questions

Experiencing difficulties when conducting a Karma test on an Angular service

Emphasizes the P tag by incorporating forward and backward navigation options

Conceal descendant of list item and reveal upon clicking

What sets server-side development apart from API creation?

Is it possible to deactivate a form control in AngularJS using a variable?

Merge JSON object information into tables, including column headings

Error: Unable to access the 'prototype' property of an undefined object (inherits_browser.js)

What is preventing me from binding ng-click to my element?

Guide to triggering an event when two distinct keys are pressed simultaneously (Using HTML5 and Javascript)

Vue.js: Issue with dynamically calculating class property

Using makeStyles() in MUI for conditional rendering

Rest parameter ...args is not supported by Heroku platform

Tips for recognizing hyperlinks within a block of text and converting them to clickable links in Angular 2

javascript calculate average based on user input array

Issue arises when attempting to render a component while utilizing window.location.pathname and window.location.hash in conjunction with a navigation bar

Troubleshooting: Issues with the functionality of ng-include in AngularJS

The process of converting a response into an Excel file

Components can be iterated over without the use of arrays

How can I invoke a PHP script using AJAX?

Error in returnTo behavior. The URL is being deleted just before making the post request