console.log(data) in browser

Here is the add account component in console.log(data) I'm getting the accountnumber generated but I dont know how to display it in alert.

How can display autogenerated (in database) primary key accountNumber in alert when user registers? I'm using an Angular front end and Web API as the backend.

AddAccount.ts component

addForm: FormGroup;
  submitted: boolean = false;
  constructor(private formBuilder: FormBuilder, private router: Router,private userService: Addaccount ) { }

ngOnInit() {
this.addForm = this.formBuilder.group({

  //accountNumber: [''],
  firstName : [''],
  middleName : [''],
  lastName : [''],
  fathersName : [''],
  phoneNumber : [''],
  emailId : [''],
  aadharNumber : [''],
  dob : [''],
  address : [''],
  occupationDetails : [''],
    });
  }
  showMsg: boolean = false;

onSubmit() {
this.submitted = true;

if(this.addForm.invalid) {
     return;
}

this.userService.createUser(this.addForm.value)
.subscribe( data => {

 console.log(data) 
//this.router.navigate(['/account-detail']);
this.showMsg= true;
      });

AddAccount.ts service:

getUsers() {
    return this.http.get<openacc[]>(this.baseUrl '/SavingsAccount');
}

getUserById(id: number) {
    return this.http.get<openacc>(this.baseUrl '/SavingsAccount/' id);
}
    
// Create User
createUser(user: openacc) {
    return this.http.post(this.baseUrl '/SavingsAccount', user);
}
    
// Modify User
updateUser(user: openacc) {
    return this.http.put(this.baseUrl   '/SavingsAccount/'   user.accountNumber, user);
}
    
// Delete User
deleteUser(id: number) {
    return this.http.delete(this.baseUrl   '/SavingsAccount/'   id);
}

CodePudding user response：

According to the method name 'this.userService.createUser', you are sending the data obtained from the addForm to your back/API to create a 'User'.

In the operation to create the created user, your back should returns the new user created, which will have the field 'accountNumber' that the DB has given it.

Then, in your subscription to the method 'createUser', data will be of type 'User' returned by the back, and simply by doing 'data.accountNumber' you will have access to that value.

I recommend that you create a User interface on the front-end, and treat it this way (change types according to your data)

interface User {
  accountNumber: string;
  firstName : string;
  middleName : string;
  lastName : string;
  fathersName : string;
  phoneNumber : string;
  emailId : string;
  aadharNumber : string;
  dob : string;
  address : string;
  occupationDetails : any;
}


addForm: FormGroup;
submitted: boolean = false;

constructor(private formBuilder: FormBuilder, private router: Router,private userService: Addaccount ) { }

ngOnInit() {...


this.userService.createUser(this.addForm.value)
.subscribe( (data: User) => {

 console.log(data.accountNumber)