How can I get the value of this object? - json

Question

I am using Angular 8 to get the data out of a radio input. When I send that data to Node then to Mongodb database, it is not register, and it appear like this in the db collection:
"__v" : 0
The output of the data that is being sent from Angular is: { type: administrator }, what I want to register in the db is only the word adminstrator. The Node console shows an error because of the object that is passed to the db when it expects a string value.
The Angular template is this:
<br>
<div class="w3-panel w3-border w3-margin" style="width: 500px; height: 550px">
<label class="w3-text-blue"><h2>New User</h2></label>
<label class="w3-text-blue"><b>Name and Last Name</b></label><br>
<input type="text" class="w3-input w3-border" [(ngModel)]="name" ><br>
<label class="w3-text-blue"><b>User</b></label><br>
<input type="text" class="w3-input w3-border" [(ngModel)]="user"><br>
<label class="w3-text-blue"><b>Password</b></label><br>
<input type="password" class="w3-input w3-border" [(ngModel)]="password"><br>
<label class="w3-text-blue"><b>Confirm Password</b></label><br>
<input type="password" class="w3-input w3-border" [(ngModel)]="confirm"><br>
<label class="w3-text-blue"><b>Type of User</b></label><br>
<form #myForm="ngForm" (submit)="sendRadio(myForm.value)" >
<input id="administrator" type="radio" name="type" class="w3-radio" value="administrator" ngModel>
<label for="administrador">Administrador</label> <br>
<input id="normal" type="radio" name="type" class="w3-radio" value="normal" ngModel>
<label for="normal">Moderador</label>
<br><br>
<button type="submit" (click)="createUser(user, password, name)" class="w3-button w3-round-xxlarge w3-green">Create</button>
<button class="w3-button w3-round-xxlarge w3-red">Clean Fields</button>
</form>
</div>
The component's typescript file:
import { Component, OnInit } from '#angular/core';
import { PersonService } from '../_services/person.service';
#Component({
selector: 'app-create-user',
templateUrl: './create-user.component.html',
styleUrls: ['./create-user.component.css']
})
export class CreateUserComponent implements OnInit {
user: any;
password: any;
confirm: any;
name: any;
type: string;
constructor(private ps: PersonService) { }
ngOnInit() {
}
sendRadio(value: any) {
this.type = value;
console.log(this.type); // <--- this outputs { type: administrator }
}
createUser(userU, userPassword, userName) {
if (this.password === this.confirm) {
if (this.password.length > 0 && this.confirm.length > 0) {
this.ps.createUser(userU, userPassword, userName, this.type);
} else {
console.log('Password has to match and be completed');
}
}else {
console.log('Password does not match');
}
}
}
The service to send the data (PersonService):
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Injectable({
providedIn: 'root'
})
export class PersonService {
uri = 'http://localhost:3000';
constructor(private http: HttpClient) { }
createUser(userU, userPassword, userName, userType: string) {
const obj = {
user: userU,
password: userPassword,
name: userName,
type: userType
};
this.http.post(`${this.uri}/createUser`, obj)
.subscribe(res => console.log('User has been created'));
}

Answer 1

Just pass in
console.log(this.type.type);
because you need the value of the key for type. This prints out 'administrator' and you can pass that to your backend node.