I'm currently developing a dashboard application that requires me to showcase statistics and data extracted from my MongoDB in various types of charts and maps using Angular and Spring Boot. The issue I'm facing is that when attempting to consume my APIs to display data on the charts, the data appears empty. Below is the code snippet for writer.service.ts:
export class WriterService {
constructor(private http: HttpClient) { }
getWritersList(): Observable<any> {
return this.http.get<Writer[]>('http://localhost:8088/users/getall');
}
}
Here's an excerpt from my app.component.ts file:
export class AppComponent implements OnInit {
wrs:Writer[];
title = 'Library Dashboard';
LineChart=[];
BarChart=[];
PieChart=[];
nms=[];
bks=[];
rds=[];
constructor( private wrService:WriterService) {
this.wrs=[];
}
ngOnInit()
{
this.wrService.getWritersList().subscribe(
res=>{
this.wrs=res;
this.nms=res.username;
this.bks=res.nb_published_books;
console.log(res);
})
// Line chart:
this.LineChart = new Chart('lineChart', {
type: 'line',
data: {
labels: this.nms,
datasets: [{
label: 'Number of published books',
data: this.bks,
fill:false,
lineTension:0.2,
borderColor:"red",
borderWidth: 1
}]
},
options: {
title:{
text:"Line Chart",
display:true
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
The console shows "Undefined" and the chart displays no data.
Provided below is the JSON data being utilized:
[
{
"_id": "5d59b7e46b7c143594d5689b",
"username": "titi",
"password": "azerty",
...
}
]