TypeError: Cannot read property 'push' of undefined - angularjs error. The page loads without error, this appears as soon as I click a button

Question

angular.module('TppAdminApp.modules.dashboard.edit-project', ['angucomplete-alt', 'ngFileUpload', '720kb.datepicker'])
    .config(dashboardEditProjectConfig)
    .controller('dashboardEditProjectController', dashboardEditProjectController);

dashboardEditProjectConfig.$inject = ['$stateProvider'];
function dashboardEditProjectConfig($stateProvider) {
    $stateProvider.state({
        bodyClass: 'content',
        headerText: 'Edit Project',
        name: 'dashboard.edit-project',
        url: '/edit-project/{id}',
        templateUrl: 'modules/dashboard/edit-project/_edit-project.html',
        controller: 'dashboardEditProjectController',
        resolve: {
            User: ['$http', 'apiUrl', '$state', function ($http, apiUrl, $state) {
                return $http.get(apiUrl + '/v1/users/me_full').then(function (res) {
                    console.log(res.data.data);
                    return res.data.data;
                }).catch(function () {
                    console.log('Unauthorized!');
                    $state.go('login');
                });
            }],

            Campaign: ['$http', 'apiUrl', '$stateParams',  function ($http, apiUrl, $stateParams) {
                return $http.get(apiUrl + '/v1/campaigns_adm_info/' + $stateParams.id + '.json').then(function (res) {
                    console.log(res.data.data);
                    return res.data.data;
                }).catch(function () {
                    return false;
                })
            }],

            id: ['$stateParams', function ($stateParams) {
                return $stateParams.id;
            }]
        }
    })
}

dashboardEditProjectController.$inject = ['$scope', '$rootScope', 'Upload', 'apiUrl', '$http', 'Campaign', 'modals', 'User', '$stateParams', 'id' ];
function dashboardEditProjectController($scope, $rootScope, Upload, apiUrl, $http, Campaign, modals, User, $stateParams, id) {
    $scope.campaign = Campaign;
    $scope.campaign.age_obj = Campaign.age_range;

    $scope.id = id;
    $scope.userFull = User;
    $scope.submitted = false;
    validateUser(User);

    $scope.ages = [
        {id: 1, text: '13 to 17'},
        {id: -1, text: '18+'},
        {id: 2, text: '18 to 24'},
        {id: 3, text: '25 to 34'},
        {id: 4, text: '35 to 44'},
        {id: 5, text: '45 to 54'},
        {id: 6, text: '55 to 64'},
        {id: 7, text: '65+'}
    ];

    $scope.genders = [
        {id: 'radios-male', text: 'Male', value: 'male'},
        {id: 'radios-female', text: 'Female', value: 'female'},
        {id: 'radios-both', text: 'Both', value: 'all'},
    ];

    $scope.locations = [
        {id: 'radios-locationYes', text: 'Yes', value: 'yes'},
        {id: 'radios-locationNo', text: 'No', value: 'no'},
    ];

    $scope.campaigns = [
        {id: 'radios-Survey', text: 'Survey', value: 'survey'},
        {id: 'radios-Content', text: 'Content', value: 'content'},
    ];

    $scope.hhis = [
        {id: 1, text: '< $24,999'},
        {id: 2, text: '$25K to $34,999'},
        {id: 3, text: '$35K to $49,999'},
        {id: 4, text: '$50K to $74,999'},
        {id: 5, text: '$75K to $99,999'},
        {id: 6, text: '$100K to $149,999'},
        {id: 7, text: '> $150,000'}
    ];

        $scope.ethnicity = [
            {id: 'white', text: 'White'},
            {id: 'african', text: 'African American'},
            {id: 'indian', text: 'American Indian'},
            {id: 'asian', text: 'Asian'},
            {id: 'hispanic', text: 'Hispanic'}
        ];

        $scope.maritalStatus = [
            {id: 'single', text: 'Single'},
            {id: 'married', text: 'Married'},
            {id: 'separated', text: 'Separated'},
            {id: 'widowed', text: 'Widowed'},
            {id: 'divorced', text: 'Divorced'}
        ];

        $scope.children = [
            {id: 'zero', text: '0'},
            {id: 'one', text: '1'},
            {id: 'two', text: '2'},
            {id: 'threeOrFour', text: '3-4'},
            {id: 'moreThanFour', text: '4+'}
        ];

    function validateUser(user) {
        $scope.userFull.nameExist = true;
        $scope.userFull.companyExist = true;
        $scope.userFull.phoneExist = true;
        $scope.userFull.emailExist = true;
        console.log(User);
        if (!user.name && user.first_name) {
            $scope.userFull.name = user.first_name + " " + user.last_name;
        }
        else if (!user.name && !user.first_name) {
            $scope.userFull.nameExist = false;
        }
        else {
            $scope.userFull.nameExist = true;
        }

        if (!user.company_name) {
            $scope.userFull.companyExist = false;
        }

        if (!user.phone) {
            $scope.userFull.phoneExist = false;
        }
    }

    /**
     * Update a value in an array of item
     * @param  {Array} objArray array of elements
     * @param  {Object} item object to insert or remove from a array
     * @return {void}
     */
    function updateSelection(objArray, item) {
        if (item.checked) {
            objArray.push(item);
        } else {
            const i = objArray.indexOf(item);
            if (i !== -1) {
                objArray.splice(i, 1);
            }
        }
    }

    //hhi_obj
    function checkAttribute(obj) {
        if (!obj.checked) {
            obj.checked = true;
        } else if (obj.checked === true) {
            obj.checked = false;
        }
    }


    

    $scope.updateMultiSelect = updateMultiSelect;

    function updateMultiSelect(obj, type) {
        checkAttribute(obj);
        updateSelection($scope.campaign[type], obj);

        if (type === 'age_obj') {
            funcClickAge(obj);
        }
    }

    function funcClickAge(data) {
        if (data.text == '18+') {
            console.log('18+');
            for (var i in $scope.ages) {
                if ($scope.ages[i].id != 1) {
                    var el = document.getElementById('age-' + $scope.ages[i].id);
                    if (el && el.checked !== true && $scope.ages[i].id !== -1) {
                        el.click();
                    }
                }
            }
        }
    }

    $scope.validateForm = validateForm;

    function validateForm() {
        $scope.submitted = true;
        // if ($scope.campaign.ages_obj.length === 0)
        if ($scope.campaign.ages_obj.length == 0)
                return false
        if ($scope.campaign.gender === '')
            return false
        if ($scope.campaign.targets_obj === null || $scope.campaign.targets_obj == '')
            return false
        if ($scope.errorcsvFile != '' || $scope.errorsurveyFile != '' || $scope.errorcontentFile != '')
            return false
        editCampaign();
    }

    function editCampaign() {
        console.log('editCampaign')
        if ($scope.editProjectForm.$valid) {
            console.log($scope.campaign);
            $scope.processing = true;

            //First Create Campaign Type Location
            // $scope.campaign.campaign_type = 'Event'
            $scope.campaign.status = 'requirements';
            // $scope.campaign.gender = 'Both'
            $scope.campaign.user_id = $scope.user.id;
            $scope.campaign.targeted_location = $scope.campaign.targets_obj.map(function (et) {
                return et.id;
            }).join(',');
            // delete $scope.campaign.targets_obj;
            $scope.campaign.age_range = $scope.campaign.ages_obj.map(function (et) {
                return et.id;
            });
            if ($scope.campaign.age_range.indexOf(-1) != -1) {
                index = $scope.campaign.age_range.indexOf(-1);
                $scope.campaign.age_range.splice(index, 1);
            }
            $scope.campaign.age_range = $scope.campaign.age_range.join(',');
            // if ($scope.campaign.age_range == '-1')
            //     $scope.campaign.age_range = '2,3,4,5,6,7';
            // delete $scope.campaign.ages_obj;
            $scope.campaign.start_date = new Date($scope.campaign.start_dateP);
            $scope.campaign.end_date = new Date($scope.campaign.end_dateP);

            var dataCamp = {campaign: $scope.campaign};
            // return $http.post(apiUrl + '/v1/campaigns.json', $scope.camp)
            return Upload.upload({url: apiUrl + '/v1/campaigns.json', data: dataCamp})
                .then(function (data) {
                    // $scope.$emit('updateCampaignList',$scope.camp);
                    console.log(data.data.data);
                    updateCompanyUser();
                    modals.successfullyUpdated('Campaign', $scope.campaign.campaign_name, data.data.data.id);
                })
                .catch(function (err) {
                    console.log(err.data.message);
                    modals.errorLocation(err.data.message).then(function () {
                    })
                })
                .finally(function () {
                    $scope.processing = false;
                })
        }
        else
            console.log('The form is not valid');

    }

    
}

The page is loaded without any errors, but as soon as I select a button this error appears.

TypeError: Cannot read property 'push' of undefined

at updateSelection (edit-project.self-fa1ef0f1f2f89ce7366667d0f997370a16b2fab98d0718915e372d3090311c06.js?body=1:145)
at ChildScope.updateMultiSelect (edit-project.self-fa1ef0f1f2f89ce7366667d0f997370a16b2fab98d0718915e372d3090311c06.js?body=1:179)
at fn (eval at compile (angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:15127), <anonymous>:4:328)
at ChildScope.$eval (angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:17995)
at angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:25609
at angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:28401
at forEach (angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:326)
at NgModelController.$$writeModelToScope (angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:28399)
at writeToModelIfNeeded (angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:28392)
at angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:28386

(anonymous) @ angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:14200 (anonymous) @ angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:10708 (anonymous) @ angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:28403 forEach @ angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:326 $$writeModelToScope @ angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:28399 writeToModelIfNeeded @ angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:28392 (anonymous) @ angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:28386 validationDone @ angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:28313 processAsyncValidators @ angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:28296 $$runValidators @ angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:28240 $$parseAndValidate @ angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:28379 $commitViewValue @ angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:28347 (anonymous) @ angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:28490 $eval @ angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:17995 $apply @ angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:18095 $$debounceViewValueCommit @ angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:28489 $setViewValue @ angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:28461 listener @ angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:25017 defaultHandlerWrapper @ angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:3547 eventHandler @ angular.self-a4ec94b978004b45127819f4f8dda67f742334b1e952c2dc446a327714b45fb5.js?body=1:3535

Answer 1

This is probably where it is:

function updateSelection(objArray, item) {
  if (item.checked) {
    objArray.push(item);
  } else {
    const i = objArray.indexOf(item);
    if (i !== -1) {
      objArray.splice(i, 1);
    }
  }
}

So update it to check that objArray is indeed an array, and if not, make it one, something like:

if (!Array.isArray(objArray)) {
  objArray = [ objArray ];
}