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

Issue

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

Solution

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.

Answered By – Catalina Zecchin

Answer Checked By – Jay B. (BugsFixing Admin)