Удалить элемент из объекта json при снятии флажка в angularjs

Question

Я использую angularjs v1.4.7. Я получил набор результатов из db и сконструировал данные как jsonobject.

$scope.originalEmpList= 
{
    "depts": [
        {
            "id": 1,
            "name": "IT",
            "software_team": "Ram, Rahim",
            "hr_team": "",
            "fin_team": ""
            
        },
        {
            "id": 2,
            "name": HR,
            "software_team": "",
            "hr_team": "Mohan",
            "fin_team": ""
        },
        {
            "id": 3,
            "name": PM,
            "software_team": "Ram",
            "hr_team": "Mohan",
            "fin_team": "John"
        }
    ],
    "softwarelist": [
        {
            "id": 1,
            "employee_name": "Ram",
            "employee_role": "Software",
            "dept_id": "1"
        },
        {
            "id": 2,
            "employee_name": "Rahim",
            "engineer_role": "Software",
            "dept_id": "1"
        },
        {
            "id": 3,
            "employee_name": "Ram",
            "engineer_role": "Software",
            "dept_id": "3"
        }
        
    ],
    "hrlist": [
        {
            "id": 4,
            "employee_name": "Mohan",
            "employee_role": "HR",
            "dept_id": "2"
        },
        {
            "id": 5,
            "employee_name": "Mohan",
            "employee_role": "HR",
            "dept_id": "3"
        }
        
    ],
    "finlist": [
        {
            "id": 6,
            "employee_name": "John",
            "employee_role": "Account",
            "dept_id": "3"
        }
        
    ]
}

и показываю таблицу ниже на стороне пользовательского интерфейса сверху jsonobject

    Select All Checkbox  Dept  Softwares   HRs    Fins
    <hr>
    Checkbox1             IT    Ram, Rahim 
    Checkbox2             HR                Mohan 
    Checkbox3             PM    Ram         Mohan  John        

На основе выбора выше чекбокса соответствующие члены команды будут

Например: если выбран Checkbox1, то показывать имена только для этого отдела.

Softwares : Ram, Rahim

Аналогично, если мы выбираем checkbox1 и checkbox2, то показываем имена для отмеченных отделов.

Softwares : Ram, Rahim
Hrs: Mohan 

И если мы выберем все 3 флажка, то отобразим имена.

Softwares : Ram, Rahim, Ram
Hrs: Mohan, Mohan
Fins: John

Я оставил без изменений исходный список emp и скопировал его в employeeList

$scope.employeeList = $scope.originalEmpList;

Обновить объект на основе выбора флажка.

$scope.UpdateOnCheckUncheck = function () {
    $scope.employeeList = $scope.originalEmpList;
    $scope.filteredArtist = [];
    
    // Collect unchecked depts  
    $scope.unchecked_depts = filterFilter($scope.employeeList.depts, 
       function (dept) {
        return !dept.Selected;
    });

    $scope.filteredSoftware= [];

    // Passing unchecked depts to remove from employeelist 
    angular.forEach($scope.unchecked_depts, function(dept) {
        $scope.updateCheckedDept(dept);
    });
};


$scope.updateCheckedDept = function(dept) {
    **// Approach 1 using reduce to copy into new array and then assign back to employeeList**
    Object.keys($scope.employeeList.softwarelist).reduce((object, 
      key) => {
       if (dept.id !=$scope.employeeList.softwarelist[key].dept_id) 
      {
       $scope.filteredArtist.push($scope.prismlist.artistlist[key]);
      }
     //return object
    }, {})

    $scope.employeeList.softwarelist= $scope.filteredSoftware;
    **//Approach 2 using splice
    angular.forEach($scope.employeeList.softwarelist, 
    function(soft, index){
    if(dept.id === soft.dept_id){
     $scope.employeeList.softwarelist.splice(index);
    } 
    });
    **//Approach 3 using slice**
};

// Подход 4 - Думая о вызове БД и построении запроса и фильтрации на стороне сервера, но вызов базы данных при каждом изменении флажка будет дорогостоящим.

На самом деле после обновления до $scope.employeeList он работает нормально, в первый раз снимите флажок, но когда снимите другой флажок, я назначаю $scope.employeeList = $scope.originalEmpList;, но это не получает исходную выборку данных d из базы данных, а не обновляется, чтобы в первый раз снять отметку с объекта.

Вкл. Каждый раз отметьте / снимите отметку, как обновить список сотрудников, чтобы заполнить вывод, как показано выше. Также предложите мне лучший подход с точки зрения производительности. Заранее спасибо

Answer 1

$scope.employeeList = $scope.originalEmpList;

- это как ссылка на $ scope.originalEmpList. Любые обновления $ scope.employeeList аналогичны обновлению $ scope.originalEmpList.

Вместо этого вы пробуете angular .copy (), который создает глубокую копию массива.

$scope.employeeList = angular.copy($scope.originalEmpList);