2

I am trying to call one ReST API when my form checkbox is toggling. When I calling method to call api , I am getting the error like

Cannot set property 'nUserId' of undefined at

My html file contains the following code,

<div>
  <button mat-raised-button color="primary" (click)="getUserPermisionsByUsernameSearch()">
    Search</button>
</div>
<br /> <br><br />
<div *ngIf="userPermissionObj">
  <div><label for="pl">Permission Level:</label> {{userPermissionObj.sPermLevel}} </div>
  <label for="pm">Permissions:</label>
  <div *ngFor="let pt of permissionType">
    <label>
      <input type="checkbox" [value]="pt.id" [checked]="userPermissionObj.sPermissionType == pt.name ? true : false"
        (change)="updateUserPermisionsByUsername(userPermissionObj,pt)" />
      {{pt.name}} -- {{userPermissionObj.nUserId}}
    </label>

And my ts file contains the following code,

export class ModifyuserpermissionsComponent implements OnInit {
    selectedUser: string;
    selectedInstitution: string;
    filtertext: string;
    public status: boolean = false;
    public data = new Array();

    institutionalUsers: any;
    userNameDetails: any;
    userPermissionObj: any;
    permissionRequestUser: any;
    modificationObj: any;
    userObj: any;
    permision: any;


    dataSource = new MatTableDataSource();
    selection = new SelectionModel<Element>(true, []);
    displayedColumns = ['UserId', 'PermissionId', 'PermissionLevel', 'PermissionType'];


    constructor(public dialog: MatDialog,
        public manageuserService: ManageuserService) { }

    ngOnInit() {

        this.manageuserService.loadUserListApiMethod()
            .subscribe((data: any) => { this.institutionalUsers = data });
    }
    loadUserForSearchPermission(event: any, obj: any) {
        if (event.isUserInput) {
            this.permissionRequestUser = obj.sUsername;
        }
    }

    permissionType = [
        { id: 1, name: 'R' },
        { id: 2, name: 'W' }
    ];

    getUserPermisionsByUsernameSearch() {
        var param: string = this.permissionRequestUser;
        this.manageuserService.getUserPermissionApiMethod(param)
            .subscribe((data: any) => { this.userPermissionObj = data });
    }

    updateUserPermisionsByUsername(userObj, permision) {
        this.modificationObj.nUserId = userObj.nUserId;
        this.modificationObj.name = permision.name;
        this.manageuserService.modifyUserPermissionApiMethod(this.userObj)
            .subscribe((data: any) => { this.institutionalUsers = data });
    }

}

Can anyone guide to find my wrong implementation here please?

0

5 Answers 5

4
+50

Did you initialize modificationObj?

You are trying to set a property of undefined object. It should be looking like below:

updateUserPermisionsByUsername(userObj, permision) {
  // this.modificationObj.nUserId = userObj.nUserId;
  // this.modificationObj.name = permision.name;

  this.modificationObj = {
    nUserId: userObj.nUserId,
    name: permision.name
  }
}
3

Your userPermissionObj property is only initialised when you click on the search button.

0

In this.manageuserService.modifyUserPermissionApiMethod(), you have to pass the value you got as parameter. Instead of calling modifyUserPermissionApiMethod() with param userObj, you used this.userObj. Try the same code by removing the this.

updateUserPermisionsByUsername(userObj, permision) {
            this.modificationObj.nUserId = userObj.nUserId;
            this.modificationObj.name = permision.name;
            this.manageuserService.modifyUserPermissionApiMethod(userObj)
                .subscribe((data: any) => { this.institutionalUsers = data });
        }
0

You're trying to set object properties to an undefined property. You need to initialize your object first, then you can add or modify properties of it.

There are many ways of doing this but here's two of them.

First:

export class ModifyuserpermissionsComponent implements OnInit {
    selectedUser: string;
    selectedInstitution: string;
    filtertext: string;
    public status: boolean = false;
    public data = new Array();

    institutionalUsers: any;
    userNameDetails: any;
    userPermissionObj: any;
    permissionRequestUser: any;
    modificationObj: any = {}; // <-- we have initialized an empty object
    userObj: any;
    permision: any;


    dataSource = new MatTableDataSource();
    selection = new SelectionModel<Element>(true, []);
    displayedColumns = ['UserId', 'PermissionId', 'PermissionLevel', 'PermissionType'];


    constructor(public dialog: MatDialog,
        public manageuserService: ManageuserService) { }

    ngOnInit() {

        this.manageuserService.loadUserListApiMethod()
            .subscribe((data: any) => { this.institutionalUsers = data });
    }
    loadUserForSearchPermission(event: any, obj: any) {
        if (event.isUserInput) {
            this.permissionRequestUser = obj.sUsername;
        }
    }

    permissionType = [
        { id: 1, name: 'R' },
        { id: 2, name: 'W' }
    ];

    getUserPermisionsByUsernameSearch() {
        var param: string = this.permissionRequestUser;
        this.manageuserService.getUserPermissionApiMethod(param)
            .subscribe((data: any) => { this.userPermissionObj = data });
    }

    updateUserPermisionsByUsername(userObj, permision) {
        // now you can set properties to modificationObj
        this.modificationObj.nUserId = userObj.nUserId;
        this.modificationObj.name = permision.name;
        this.manageuserService.modifyUserPermissionApiMethod(this.userObj)
            .subscribe((data: any) => { this.institutionalUsers = data });
    }

}

or the second way

export class ModifyuserpermissionsComponent implements OnInit {
    selectedUser: string;
    selectedInstitution: string;
    filtertext: string;
    public status: boolean = false;
    public data = new Array();

    institutionalUsers: any;
    userNameDetails: any;
    userPermissionObj: any;
    permissionRequestUser: any;
    modificationObj: any;
    userObj: any;
    permision: any;


    dataSource = new MatTableDataSource();
    selection = new SelectionModel<Element>(true, []);
    displayedColumns = ['UserId', 'PermissionId', 'PermissionLevel', 'PermissionType'];


    constructor(public dialog: MatDialog,
        public manageuserService: ManageuserService) { }

    ngOnInit() {

        this.manageuserService.loadUserListApiMethod()
            .subscribe((data: any) => { this.institutionalUsers = data });
    }
    loadUserForSearchPermission(event: any, obj: any) {
        if (event.isUserInput) {
            this.permissionRequestUser = obj.sUsername;
        }
    }

    permissionType = [
        { id: 1, name: 'R' },
        { id: 2, name: 'W' }
    ];

    getUserPermisionsByUsernameSearch() {
        var param: string = this.permissionRequestUser;
        this.manageuserService.getUserPermissionApiMethod(param)
            .subscribe((data: any) => { this.userPermissionObj = data });
    }

    updateUserPermisionsByUsername(userObj, permision) {
        this.modificationObj = {} // you can initialize your object here
        
        // or maybe
        // this.modificationObj = { 
        //   nUserId: userObj.nUserId,
        //   name: permission.name
        // } 

        this.modificationObj.nUserId = userObj.nUserId;
        this.modificationObj.name = permision.name;
        this.manageuserService.modifyUserPermissionApiMethod(this.userObj)
            .subscribe((data: any) => { this.institutionalUsers = data });
    }

}
0

When using Typescript, try to use Interface model instead of any (userPermissionObj: any) as a type. This will help you reduce these kind of errors

example:

interface  UserPermissionObj {
   nUserId: integer,
   name: string
}

userPermissionObj: UserPermissionObj;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.