CODEWITHSUNDEEP
angulartypescriptrxjs
Sakib Mulla
Sakib Mulla

Reputation: 83

How to find get keys value from object?

i have collect data from service in interface type object but not able to find or filter key from this object.

the error is ERROR TypeError: Cannot read property 'userAccess' of undefined at ShowBranchuserComponent.push../src/app/pages/userrelated-page/show-branchuser/show-branchuser.component.ts.ShowBranchuserComponent.ngOnInit (show-branchuser.component.ts:42)

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { UserrelatedService } from '../userrelated-page.service';
import { UserRegister } from 'app/shared/model/Register';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { RouteInfo } from 'app/shared/sidebar/sidebar.metadata';
import {map} from 'rxjs/operators';


@Component({
  selector: 'app-show-branchuser',
  templateUrl: './show-branchuser.component.html',
  styleUrls: ['./show-branchuser.component.scss']
})
export class ShowBranchuserComponent implements OnInit {
  showuser: UserRegister;
  pname;
  regularForm: FormGroup;
  access:RouteInfo[];

  constructor(private _AR:ActivatedRoute, 
    private _router: Router, 
    private _userRelated: UserrelatedService,
    private _fb: FormBuilder) { 
    this._AR.params.subscribe(data=>{this.pname = data['id']})
  }

  ngOnInit() {
    this._userRelated.getOneUser(this.pname).subscribe(data=> this.showuser = data);
    this.regularForm = this._fb.group({
      'id': [{value:'', disabled: true}, Validators.required],
      'name':[{value:'', disabled: true}, Validators.required],
      'username':[{value:'', disabled: true}, Validators.required],
      'role':[{value:'', disabled: true}, Validators.required],
      'status':[{value:'', disabled: true}, Validators.required],
      'state':[{value:'', disabled: true}, Validators.required],
      'pincode':[{value:'', disabled: true}, Validators.required],
      'mobileno':[{value:'', disabled: true}, Validators.required],
      'address':[{value:'', disabled: true}, Validators.required],
    });
   this.access = this.showuser.userAccess; // here showing error 
    console.log(this.showuser);
  }

  onReactiveFormSubmit(){

  }
}

Upvotes: 1

Views: 160

Answers (2)

wentjun
wentjun

Reputation: 42526

Returning an observable value is an asynchronous operation. Because of that, the block of code you have written will fail as showuser will be undefined at that point. To further understand this, you should read up on JavaScript's queue and event loop.

You should be assigning showuser.userAccess to the access property within the .subscribe() block instead:

ngOnInit() {
    this._userRelated.getOneUser(this.pname).subscribe(data=> {
      this.showuser = data;
      this.access = this.showuser.userAccess; 
      console.log(this.showuser);
     ]);
    this.regularForm = this._fb.group({
      'id': [{value:'', disabled: true}, Validators.required],
      'name':[{value:'', disabled: true}, Validators.required],
      'username':[{value:'', disabled: true}, Validators.required],
      'role':[{value:'', disabled: true}, Validators.required],
      'status':[{value:'', disabled: true}, Validators.required],
      'state':[{value:'', disabled: true}, Validators.required],
      'pincode':[{value:'', disabled: true}, Validators.required],
      'mobileno':[{value:'', disabled: true}, Validators.required],
      'address':[{value:'', disabled: true}, Validators.required],
    });

  }

Upvotes: 4

Lagistos
Lagistos

Reputation: 3958

You insert data into this.showuser in subscribe function so this is an async operation but you are trying to use the data in sync operation. async operations take time for the data to come back from the server to the client so what you are trying to do is to insert data into this.acess before the data arrives.

To solve this you can insert the data to this.acess inside the subscribe function

Upvotes: 1

Related Questions