Consuming an API and displaying items in chart/Angular

Question

I'm creating a dashboard application where i have to display statistics and data retrieved from my MongoDB into diffrent types of charts and maps using Angular and Spring boot .Thing is when trying to consume my APIs so i can display data into the charts, the data comes out empty. Below the writer.service.ts file:

export class WriterService {

  constructor(private http: HttpClient) { }

  getWritersList(): Observable<any> {
    return this.http.get<Writer[]>('http://localhost:8088/users/getall');
  }
}

Here's 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
         }
     }]
 }
}
});

In the console i get "Undefined" and the chart comes out empty, with no data displayed.

And this is the json data that i'm trying to use:

[
  {
    "_id": "5d59b7e46b7c143594d5689b",
    "username": "titi",
    "password": "azerty",
    "first_name": "Leo",
    "last_name": "Tolstoy",
    "gender": "male",
    "age": "82",
    "country_of_origin": "Russia",
    "county_of_stay": "Albania",
    "education_level": "master degree",
    "major": "Philosophy",
    "years_of_experience": "50",
    "current_State": "Freelancer",
    "number_of_written_books": 3,
    "number_of_published_books": 2,
    "game_genre": "Action",
    "publisher_name": "HarperCollins",
    "list_of_books":[
      {"_id": "2k49b7e46b7c143594d5689b",
    "title": "War and Peace",
    "description": "War and Peace broadly focuses on Napoleon’s invasion of Russia in 1812 and follows three of the most well-known characters in literature: Pierre Bezukhov, the illegitimate son of a count who is fighting for his inheritance and yearning for spiritual fulfillment; Prince Andrei Bolkonsky, who leaves his family behind to fight in the war against Napoleon; and Natasha Rostov, the beautiful young daughter of a nobleman who intrigues both men.",
    "year_of_publication":1868,
    "category":"historical"},
    {"_id": "4m79b7e46b7c143594d5124l",
    "title": "Anna Karenina",
    "description": "Anna Karenina is the tragic story of Countess Anna Karenina, a married noblewoman and socialite, and her affair with the affluent Count Vronsky. ... Back in Russia, she is shunned, becoming further isolated and anxious, while Vronsky pursues his social life.",
    "year_of_publication":1877,
    "category":"romance"}
    ]
  },
  {
    "_id": "5d5b04da38f3b21f85a063a7",
    "username": "jojo",
    "password": "qsdfgh",
    "first_name": "Jojo",
    "last_name": "Moyes",
    "gender": "female",
    "age": "50",
    "country_of_origin": "United Kingdom",
    "county_of_stay": "Australia",
    "education_level": "master degree",
    "major": "Journalism",
    "years_of_experience": "30",
    "current_State": "Employee",
    "number_of_written_books": 30,
    "number_of_published_books": 20,
    "game_genre": "Romance",
    "publisher_name": "Graywolf Press",
    "list_of_games":[
         {"_id": "5g67b7e46b7c143594d5124l",
    "title": "Me before you",
    "description": "Louisa Clark is an ordinary girl living an exceedingly ordinary life—steady boyfriend, close family—who has barely been farther afield than their tiny village. She takes a badly needed job working for ex–Master of the Universe Will Traynor, who is wheelchair bound after an accident.",
    "year_of_publication":2012,
    "category":"romance"}
    ]
  }
]

Answer 1

What I can see from your code, you're creating a chart outside of the subscribe which means, you create it when don't have any data yet. You should move that creation inside the subscribe.

Something like this:

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
                            }
                        }]
                    }
                }
            }
        });
}

Answer 2

Try changing

getWritersList(): Observable<any> {
    return this.http.get<Writer[]>('http://localhost:8088/users/getall');
  }

to

getWritersList(): Observable<any> {
    return this.http.get<any>('http://localhost:8088/users/getall');
  }

and see if it helps.