Why does the service return me undefined when I request an item in Angular?

Question

I have a service in Angular that returns an array of Any types

import { Injectable } from '@angular/core';
import axios from "axios";

@Injectable({
  providedIn: 'root'
})

export class BooksService {

  private books:any[] = [];

  constructor() {
    this.books = this.getData()
  }

  getData()
  {
    axios.get(`https://localhost:3000/api/get`)
      .then(data => {
          return data;
      })
      .catch(error => {
          return error; 
      })
  }

  getBooks():any[]
  {
    return this.books;
  }

  getBook(idx:number):any
  {
    return this.books[idx]
  }
}

so when in my component I call the 'getBooks' function I get the following

enter image description here

which works fine, but when I call the 'getBook()' function

console.log(this._booksService.getBook(1))

It returns 'undefined', does anyone know why?

enter image description here

Answer 1

I think it's because the console.log function is not 'waiting' for the get request to get through. You should call the getBook function on the constructor, or anyways before calling console.log.