I'm trying to get a kids' list from JSON webservice, amid logging in I get a JSON response of name.... and the kids list for a specific doctor. I have the response in the console but for some reason when I try to display it in the HTML file I fail to do it. Here's my kidsdetails.component.ts:
import {KidsService} from '../../service/kids.service';
import {ActivatedRoute, Router} from '@angular/router';
import {UserService} from '../../service/user.service';
import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
import {environment} from '../../../environments/environment';
import {ToastrService} from 'ngx-toastr';
import {Doctor} from '../../model/doctor';
import {Kid} from '../../model/kid';
import {AppComponent} from '../../app.component';
@Component({
selector: 'app-details',
templateUrl: './kidsdetails.component.html',
styleUrls: ['./kidsdetails.component.css']
})
export class KidsdetailsComponent implements OnInit {
public kids : Array<Kid> = [];
// tslint:disable-next-line:variable-name max-line-length
constructor(private service: KidsService,
private route: ActivatedRoute,
private router: Router,
// tslint:disable-next-line:variable-name
private _auth: UserService,
private toastr: ToastrService) {
}
imageServer = `${environment.uploadWebServices}/upload/`;
doctors: [];
doctor;
notes: [];
selectedKid;
info = false;
game = false;
advancement = false;
personal = false;
array: Array<any>;
valueEditor = '';
games: Array<any>;
moyenne = 0;
pin = '';
isCollapsed = true;
doc:Array<Doctor>=[];
kid;
selectedParent;
ngOnInit(): void {
this.array = [];
for (let i = 0; i < 30; i++) {
this.array.push(i + 1);
}
this.getKidsList();
this.valueEditor = '';
}
getKidsList() {
this.kid=this.kids;
}
/* this.doctor = res;
this.doctors.forEach((doctor: Array<any>) => {
console.log('doc', doctor);
if (doctor['kidsinformation']) {
doctor['kidsinformation'].forEach((kid) => {
// el.photo
this.service.getKidImage(kid.photo).subscribe(
image => {
// console.log('image', image);
},
err => {
// console.warn('error', err);
if (err.status === 200) {
const img = err.error.text;
kid.photo = 'data:image/lpeg;base64,' + img;
// console.log("img", img)
}
}
);
});
}
});
},
(err) => {
console.log('err', err);
}
);*/
openKid(kid) {
this.games = [];
this.moyenne = 0;
console.log('kid', kid);
this.selectedKid = kid;
this.info = true;
this.game = false;
this.service.getUser(this.selectedKid.idUser).subscribe(
res => {
this.selectedParent = res;
}
)
this.service.getKidGames(kid.idUser, kid.id).subscribe(
(res) => {
console.log('games', res);
this.games = res as Array<any>;
this.games.forEach((el) => {
this.moyenne += el.gameScore;
});
this.moyenne = Math.floor(this.moyenne / this.games.length);
},
(err) => {
console.log('error occured', err);
}
);
document.querySelector('#m').classList.add('is-active');
}
openNotes() {
this.notes = [];
// this.selectedKid = kid;
/*this.service.getKidNotes(this.selectedKid.idUser, this.selectedKid.id).subscribe(
(res) => {
console.log('notes', res);
this.notes = res as [];
}, (err) => {
console.log('error occured', err);
});*/
this.router.navigateByUrl(`kids/${this.selectedKid.idUser}/${this.selectedKid.id}/notes`);
}
closePopup() {
document.querySelector('#m').classList.remove('is-active');
}
goToInfo() {
this.info = true;
this.game = false;
this.personal = false;
this.advancement = false;
}
goToGames() {
this.info = false;
this.game = true;
this.personal = false;
this.advancement = false;
}
goToAdvancement() {
this.info = false;
this.game = false;
this.personal = false;
this.advancement = true;
}
goToPersonalNotes() {
this.info = false;
this.game = false;
this.personal = true;
this.advancement = false;
}
logout() {
this._auth.logout();
this.router.navigateByUrl('/authentication/login');
}
addKid() {
document.querySelector('#add').classList.add('is-active');
}
onCreate() {
document.querySelector('#code').classList.add('is-active');
}
closeCodePopup() {
document.querySelector('#code').classList.remove('is-active');
}
savePin() {
console.log('pin is', this.pin);
this.service.consumeKid(this.pin).subscribe(
(res) => {
this.getKidsList();
this.pin = '';
this.toastr.success('The child was added successfully');
this.closeCodePopup();
},
(err) => {
this.toastr.error('A problem occurred while adding the child');
// console.log(err);
}
);
}
getEditorText() {
// kidId , text
// return this.http.post("url", { }, { headers : json + authorization })
console.log('text ', this.valueEditor);
if (this.valueEditor !== '') {
this.service.addNote(this.selectedKid.id, this.selectedKid.idUser, this.valueEditor).subscribe(
res => {
console.log(' saved note , res => ', res);
this.toastr.success('Note was added successfully');
},
err => {
console.log('error saving notes', err);
this.toastr.error('There was an error adding the note');
}
);
}
}
updateInput(e) {
this.valueEditor = e;
}
showAllNotes() {
// tslint:disable-next-line:no-unused-expression
this.router.navigate['kid/notes'];
}
toggleCollapse() {
this.isCollapsed = !this.isCollapsed;
}
}
This is my kidsdetails.component.html
<div class="row mt-4">
<div class="col-md-4">
<a (click)="logout()"
style="padding:15px 20px; border-radius: 50%; background-color: #c8c8c8; color: white; cursor: pointer">
<i class="fa fa-power-off"></i>
</a>
</div>
<div class="col-md-4 mb-5">
<p class="text-center h2" style="color: #EF6E28; font-weight: 700">KIDS LIST</p>
</div>
<!--div class="col-md-4" style="display: flex">
<div style="margin: 0 auto"></div>
<div>
<a
style="padding:15px 20px; border-radius: 50%; background-color: #EF6E28; color: white; cursor: pointer">
<i class="fa fa-plus"></i>
</a>
</div>
</div-->
<div class="col-md-4" style="display: flex">
<div style="margin: 0 auto"></div>
<button id="circle" style="color: white; cursor: pointer"
mat-raised-button (click)="onCreate()">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="row mt-3">
<div class="col-md-1"></div>
<div class="col-md-10">
<!--div [(ngModel)]="doctor.Kids"></div-->
<div *ngFor="let k of kids" class="col-md-6">
<!--pre>
{{kids | json}}
</pre-->
<!--a href="/kidsinformation/kid/{{doctor.id}}/{{kid.id}}"-->
<a (click)="openKid(k)" style="cursor: pointer">
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<!--img src="{{imageServer}}{{kid.photo}}" style="height: 100%" class="card-img" alt="..."-->
<img *ngIf="k.gender == 1" src="assets/Girl.png" style="height: 100%" class="card-img" slot="start">
<img *ngIf="k.gender == 0" src="assets/Boy.png" style="height: 100%" class="card-img" slot="start">
</div>
<div class="col-md-8">
<div class="card-body">
<div style="display: flex">
<h3 class="card-title text-info"><strong>{{k.nickName}}</strong></h3>
<div style="margin: 0 auto"></div>
<h3 class="card-title text-secondary">{{k.age}}</h3>
</div>
<p class="card-text" style="margin-bottom: 0 !important"><small class="text-muted"></small></p>
<div style="display: flex">
<p class="card-text" style="margin-bottom: 0 !important;">
<!--Parent phone number here -->
<small class="text-muted"></small>
</p>
<div style="margin: 0 auto"></div>
<p class="card-text" style="margin-bottom: 0 !important;">
<small class="text-right gender girl" *ngIf="k.gender == 1">Girl</small>
<small class="text-right gender boy" *ngIf="k.gender == 0">Boy</small>
</p>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-1"></div>
<div class="modal" id="m">
<div class="modal-background" (click)="closePopup()"></div>
<div class="modal-card">
<div class="container" style="background-color: #E9E9E9">
<div class="row">
<div class="col-md-12">
<img style="width: 80px; display: block; margin: auto" src="assets/logoSghartoon.png" alt="">
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="tabs">
<div id="tab3" class="tab">
<ul style="font-size: 1.5rem" class="nav nav-tabs">
<li class="tabulation tab-info mr-3"><a (click)="goToInfo()">Kid's info</a></li>
<li class="tabulation tab-game mr-3"><a (click)="goToGames()">Games</a></li>
<!--li class="tabulation tab-advance mr-3"><a (click)="goToAdvancement()">Advancement</a></li-->
<li class="tabulation tab-personal mr-3"><a (click)="goToPersonalNotes()">Personal notes</a></li>
</ul>
<!-- Kid's info Start-->
<div class="tab-content" *ngIf="info">
<div class="container" style="margin-top: -1px">
<div class="row">
<div class="col-md-12 mt-5 pl-5 pr-2">
<div class="row pb-2">
<div class="col-md-4">
<div>
</div>
<!--img width="250px" src="{{imageServer}}{{selectedKid.photo}}" alt=""-->
<img *ngIf="selectedKid.gender == 1" src="assets/Girl.png" style="height: 100%"
class="card-img" slot="start">
<img *ngIf="selectedKid.gender == 0" src="assets/Boy.png" style="height: 100%"
class="card-img" slot="start">
</div>
<div *ngIf="selectedKid" class="col-md-8">
<div class="card-body">
<div style="display: flex">
<h3 class="card-title h1 text-info">
<strong>{{selectedKid.nickName}}   </strong>
<strong style="font-size: 2.5rem !important;" class="text-right h1 gender girl"
*ngIf="selectedKid.gender == 1">Girl</strong>
<strong style="font-size: 2.5rem !important;" class="text-right h1 gender boy"
*ngIf="selectedKid.gender == 0">Boy</strong>
</h3>
<div style="margin: 0 auto"></div>
<h3 class="card-title text-secondary" style="font-size: 2rem">
<strong>{{selectedKid.age}} Years old</strong>
</h3>
</div>
<p class="card-text" style="margin-bottom: 0 !important; font-size: 2rem; color: gray">
</p>
<div style="display: flex">
<div style="margin: 0 auto"></div>
<p class="card-text" style="margin-bottom: 0 !important;">
</p>
<!--Parent phone number here -->
<div>
<small class="phone-number">
<i id="phone" class="fa fa-phone"></i>
Phone number: {{selectedParent.phoneNumber}} </small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Kid's info End-->
<!-- Games Start-->
<div class="tab-content" *ngIf="game" style="border-bottom-left-radius: 10px; background-color: #EF6E28">
<div class="container" style="margin-top: -1px">
<div class="row">
<div class="col-md-12 mt-5 pr-2">
<div class="row pb-2">
<div class="col-md-2"
style="margin-top: auto; margin-bottom: auto; padding-right: 0; padding-left: 0">
<div style="text-align: center">
<span class="h1 text-center text-light"
style="font-size: 3rem"> <strong>{{moyenne}}</strong></span>
</div>
<div style="text-align: center">
<span class="h3 text-center text-light"><strong>Total Score</strong></span>
</div>
</div>
<div class="col-md-10">
<div class="card-body card-body-modal">
<div style="background-color: white; padding: 20px; border-radius: 10px"
class="table-wrapper-scroll-y my-custom-scrollbar">
<table class="table table-striped mb-0">
<thead style="background-color: #E9E9E9; border-radius: 25px">
<th>Game name</th>
<!--th>Type</th-->
<th>Timing</th>
<th>Score</th>
<th>Action</th>
</thead>
<tbody>
<tr *ngFor="let game of games" style="background-color: #FFFFFF; color: #EF6E28">
<td class="first_td"> {{game.idTestGame | gameName}} </td>
<!--td>{{game}}</td-->
<td>{{game.timeScore}}sec</td>
<td class="last_td"> {{game.gameScore}} </td>
<td *ngIf="isCollapsed">
<button
(click)="toggleCollapse()" class="btn btn-outline-warning">Show more details
</button>
</td>
<td *ngIf="!isCollapsed">
<button
(click)="toggleCollapse()" class="btn btn-outline-warning">Show less details
</button>
</td>
<div *ngIf="!isCollapsed">
<img src="assets/gameScreenshot.PNG" style="height: auto" class="card-img">
</div>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Games End-->
<!-- advancement Start-->
<!--div class="tab-content" *ngIf="advancement"
style="border-bottom-left-radius: 10px; margin-bottom: -1px ;background-color: #00A5D2">
</div-->
<!-- advancement End-->
<!-- Presonal notes start -->
<div class="tab-content" *ngIf="personal"
style="border-bottom-left-radius: 10px; background-color: #ffdf00">
<div class="container-fluid" style="margin-top: -1px">
<div class="row">
<div class="col-md-12 mt-2 mb-2 pr-2 pl-2">
<div class="container-fluid" style="background-color:#E9E9E9; height: 345px ;border-radius: 10px">
<div class="row">
<div class="col-md-2" style="margin-top: auto; margin-bottom: auto">
<button style="margin-left: 10px; border-radius: 10px;" kendoButton (click)="openNotes()"
[primary]="true">Show all notes
</button>
</div>
<div class="col-md-10">
<div>
<kendo-editor [value]="valueEditor" (valueChange)="updateInput($event)"
style="height: 300px; margin-top: 5px"></kendo-editor>
</div>
<div style="display: flex">
<div style="margin-left: auto; margin-right: auto"></div>
<div>
<button style="border-radius: 10px;margin-top:5px; margin-bottom: 20px" kendoButton
[primary]="true" [disabled]="valueEditor==''" (click)="getEditorText()"> getText
</button>
</div>
</div>
</div>
<div *ngFor="let note of notes">
<div>
<pre> {{note | json }} </pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Presonal notes End -->
</div>
</div>
</div>
</div>
<!-- Child add via pin code start -->
<div class="modal" id="code">
<div class="modal-background" (click)="closeCodePopup()"></div>
<div class="modal-card" style="width: 40%">
<header class="modal-card-head">
<p class="modal-card-title">Add a kid</p>
<button class="close" (click)="closeCodePopup()"><i class="far fa-times-circle"></i></button>
</header>
<form #f="ngForm">
<section class="modal-card-body">
<div class="form-group">
<label for="">Pin code</label>
<input type="text" #p="ngModel" required [(ngModel)]="pin" name="pin" placeholder="PIN" class="form-control">
<div class="text-danger" *ngIf="p.touched && p.invalid"> Pin code is required!</div>
</div>
</section>
<footer class="modal-card-foot">
<button class="btn " [disabled]="f.invalid" style="background-color: #EF6E28; color: white" (click)="savePin()">
Save changes
</button>
<button class="btn" (click)="closeCodePopup()">Cancel</button>
</footer>
</form>
</div>
</div>
<!-- Child add via pin code end -->
This is the Doctors model:
export class Doctor {
public createdAt:string ;
public firstName:string;
public id: string;
public kids: Array<Kid>;
public lastName:string;
public login: string;
public mail: string;
public password: string;
public phoneNumber:string;
public photo: string;
public token: string;
public updatedAt: string;
}
This is the service: I get the doctors by the method getUsers() because I don't have direct access to the kid's list:
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {environment} from '../../environments/environment';
import {UserService} from './user.service';
import {Router} from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class KidsService {
private readonly proxy: string = environment.usersWebServices;
private readonly proxyTrace: string = environment.traceWebServices;
private readonly imageServer: string = environment.uploadWebServices;
constructor(private http: HttpClient,
private service: UserService,
private route: Router) { }
private get JsonType() {
const headers = new HttpHeaders({ Authorization : 'Bearer ' + localStorage.getItem('access') });
// headers.append({'Authorization': ''});
return headers;
}
public getUsers() {
return this.http.get(`${this.proxy}/doctor`, { headers : this.JsonType });
}
getUser(id) {
// authentication/id
return this.http.get(`${this.proxy}/user/${id}`, { headers : this.JsonType });
}
onLogout() {
localStorage.removeItem('token');
this.route.navigateByUrl('/authentication/login');
}
getKidGames( idUser, idKid ) {
return this.http.get(`${this.proxyTrace}/dataoutput/evaluation/${idUser}/${idKid}`, { headers : this.JsonType });
}
consumeKid(pinCode) {
const idDoctor = this.service.getUserDetails().unique_name;
return this.http.get(`${this.proxy}/kidcode/consume/${pinCode}/${idDoctor}`);
}
addNote( idKid, idUser, text ) {
const obj = { text , idKid , idUser};
return this.http.post(`${this.proxy}/doctornote`, obj, { headers : this.JsonType });
}
getKidNotes(idUser, idKid) {
return this.http.get(`${this.proxy}/doctornote/bykid/${idUser}/${idKid}`, {headers : this.JsonType});
}
getKidImage(id) {
return this.http.get(`${this.imageServer}/upload/${id}`, {headers : this.JsonType});
}
}
