Ways to fix the TypeError that occurs when attempting to convert undefined or null to an object by using Function.keys

I am attempting to conceal the field. When the user clicks on glyphicon-eye-open, I will display glyphicon-eye-close and set the condition to true. If the condition is true, then I push that value into an array.

Here is the function I am using, I have two roles: actor and singer. Both have similar fields with the same model name. I display values based on the role.

I successfully push the value into the array for the actor. However, when I try the same for the singer, it shows the error below.

Even after trying with different model names, I still encounter the same error.

 TypeError: Cannot convert undefined or null to object
        at Function.keys (<anonymous>)
        at $$childScopeClass.ManageProfileController.$scope.pushrolefield(manageprofile.controller.js:214)
        at angular.js:10773
        at angular.js:18981
        at $$childScopeClass.$eval(angular.js:12608)
        at $$childScopeClass.$apply(angular.js:12706)
        at HTMLLabelElement.<anonymous>(angular.js:18980)
        at HTMLLabelElement.dispatch(jquery-2.0.3.min.js:5)
        at HTMLLabelElement.y.handle (jquery-2.0.3.min.js:5)

My html :

<div class="wrap">
<div class="panel-body newPanelBody" ng-if="displaySingerInfo && !displayActorInfo">
 <div class="newWrap">
            <label for="qual"  class="first-heading">About You*<span class="styleatr">not more than 160 Characters</span></label> 
            <textarea rows="4" cols="10" id="qual" class="textarea1" placeholder="say something about you " ng-model="model.aboutyou">
            </textarea> 

        </div>
                 <label ng-class="{'glyphicon glyphicon-eye-close': allowrole.saboutyou, 'glyphicon glyphicon-eye-open': !allowrole.saboutyou}" ng-click="pushrolefield(allowrole.saboutyou = allowrole.saboutyou?false:true)"><input class="eyecheck1" type="checkbox" ng-model="allowrole.saboutyou" ng-hide="allowrole.saboutyou || !allowrole.saboutyou"/></label>             
                            </div>
</div>

<div class="panel-body newPanelBody" ng-if="displayActorInfo && !displaySingerInfo">
 <div class="newWrap">
            <label for="qual"  class="first-heading">About You*<span class="styleatr">not more than 160 Characters</span></label> 
            <textarea rows="4" cols="10" id="qual" class="textarea1" placeholder="say something about you " ng-model="model.aboutyou">
            </textarea> 

        </div>
                 <label ng-class="{'glyphicon glyphicon-eye-close': allowrole.saboutyou, 'glyphicon glyphicon-eye-open': !allowrole.saboutyou}" ng-click="pushrolefield(allowrole.saboutyou = allowrole.saboutyou?false:true)"><input class="eyecheck1" type="checkbox" ng-model="allowrole.saboutyou" ng-hide="allowrole.saboutyou || !allowrole.saboutyou"/></label>             
                            </div>
</div>
</div>

My controller :

$scope.rolehide = {
        aboutyou: 'aboutyou',
        saboutyou: 'saboutyou'
    };

    $scope.allowrole = {
        aboutyou: false,
        saboutyou: false
    };

    $scope.rolehiddenfields = [];

    $scope.pushrolefield = function(allow){
        debugger;
        console.log(allow);
        $scope.rolehiddenfields = [];
        var users = {}, 
            allows = $scope.allowrole;
      Object.keys(allows).forEach(function(key){
        allows[key] ? users[key] = $scope.rolehide[key] : null;
      });
      $scope.rolehiddenfields.push(users);
    }; 

Answer №1

At the conclusion of your JavaScript document, there is a brief if statement utilizing a null value. It would be more beneficial to substitute this null with either an empty object or an empty array.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps should I take to grant API access if cross-browser requests are restricted?

Creating a C# web service to retrieve data from a server raises the question of how to grant API access to other users who want to query it using client-side code. For example, imagine the web service is hosted on Domain1.com. How can someone from Domain2 ...

Tips for customizing the timing of a Bootstrap modal's opening delay?

I have integrated gem "bootstrap-sass", "~> 2.3.0.0", which indicates that I am utilizing Bootstrap 2. Detailed information on the modal can be found here. The code for my custom modal looks like this: #Modal.modal.hide.fade{"aria-hidden" => "true" ...

How can you update the background image of a particular div using the 'onclick' feature in React.JS?

Thank you for helping me out here. I'm currently working with ReactJS and facing a challenge where I need to change the background of a div from a color to a specific image URL upon clicking a button in a modal. Despite my efforts, I keep encountering ...

Obtain base64 representation of a file using plupload file uploader

I am currently utilizing the Plupload Uploader. My objective is to convert the uploaded file to base64 and transmit it within a SOAP envelope. I have successfully created the envelope and utilized my web-service. However, I am wondering how I can retrieve ...

Make the minimum height of one div equal to the height of another div

My query is somewhat similar to this discussion: Implementing a dynamic min-height on a div using JavaScript but with a slight twist. I am working on a dropdown menu within a WordPress site, integrated with RoyalSlider. The height of the slider div adjust ...

A helpful guide on resetting ReactJs to its default state when data is not found

Currently, I'm fetching data from my database, but just for the sake of this question, I have opted to manually create an example with fake data. I am in the process of creating a search bar for my users to navigate through all the data retrieved fro ...

Is it possible to use reactjs and react-router to showcase either a component or {this.props.children}?

Here's the scene: I have multiple components where certain words can be clicked to link to a reference page/component. If the highlighted words are not clicked, the component is displayed as is (and there are many of them with this feature and a menu ...

Tips on tallying the frequency of items in a state array

I'm currently working on an application in which clicking a button adds the item's value to the state. The button is clickable multiple times, allowing the same item to be added multiple times in the state array. My current code snippet: export ...

What's the reason behind this file not opening?

When I try to insert this code into files index.html, style.css, and app.js, the page refuses to open. The browser constantly displays a message saying "The webpage was reloaded because a problem occurred." I am using a MacBook Air with macOS Big Sur and a ...

Display a personalized error notification

How can I display errors in form validation without having the messages always visible? <form name="user-form" method="POST" action="{{route('registrationUser')}}"> <div class="col-lg-8"> Username <input type="te ...

The ElementNotVisibleException error was triggered because the element is currently hidden from view, making it unable to be interacted with through the command

I'm facing an issue when trying to clear the text box. The error message I am receiving is: org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with Command duration or timeout: 30.14 se ...

Debugging Success Message Display Issue in JavaScript

$.ajax({ type: "POST", url:'/saveLayout', data: {id : layoutId, section : arrSection}, success: function(response){ $('#successMsg').addClass("errorBox"); document.getEleme ...

Avoid triggering the parent modal to close when a child element is clicked in VueJS

In my Vue application, there is a situation where I have a button called "detach button" with a @click function inside an element that is clickable. When clicking on this parent element, it triggers another @click function and toggles a Bootstrap modal eve ...

PHP Pagination with AJAX and MySQL

I'm currently working on a website that functions as a forum, where posts are displayed dynamically using ajax. Upon user login, they encounter a 'orderby' dropdown selection, allowing them to choose the order of the posts. Select Menu < ...

Incorporating items into a dynamic array using MobX

Issue with Pushing MobX Objects to an Observable Array I'm facing a challenge when trying to push objects into an observable array in MobX and iterate over them successfully. At the starting point, I initialize the observable array: if (!self.selec ...

My server keeps crashing due to an Express.js API call

I'm completely new to express.js and API calls, and I'm stuck trying to figure out why my server keeps crashing. It works fine the first time, rendering the page successfully, but then crashes with the error: TypeError: Cannot read property &apo ...

I'm having trouble getting my innerHTML command to update anything on the webpage, and the reason is eluding me

Below is the code snippet provided: <div id="js"><button onclick="document.getElementById('js').innerHTML=('<form> <input type=text name=tick1></input> <input type=text name=tick2></input> ...

The link function fails to execute

I have created a custom Directive. The issue I am facing is that the html template is not being rendered. Upon debugging, I noticed that the link function is never called because the instance function is also never called. To troubleshoot, I added "debu ...

Guide on transferring data from a component to App.vue in Vue 3, even with a router-view in the mix

I have the following layout: src components Footer.vue views Page.vue App.vue I want to access the 'message' vari ...

How can I reduce the burden of dependencies on users with a pre-built NPM package?

I recently took over maintenance of an NPM package. It has a unique setup where the main file is located in the 'dist/' directory and it's built using webpack (via 'npm run build'). While this works for us, installing this package ...