CODEWITHSUNDEEP
angulartypescriptapigetundefined
manti13
manti13

Reputation: 111

API Data undefined when used in the component

i have this service to get data from the api and save it into arrays afterwards:

export class DataService {
constructor(private http: HttpClient) { }

readonly baseURL = "https://localhost:44302/api";
books: Book[];
users: User[];
cards: Card[];
postId: number;

httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
}

getBooks() {
  return this.http.get(this.baseURL + '/books');
}
getCards() {
  return this.http.get(this.baseURL + '/cards');
}
getUsers() {
  return this.http.get(this.baseURL + '/users');
} 
getData() {
  const observableList: Observable<any>[] = [];

  observableList.push(this.getBooks());
  observableList.push(this.getUsers());
  observableList.push(this.getCards());

  forkJoin(observableList).subscribe(resultList => {
    this.books = resultList[0] as Book[];
    this.users = resultList[1] as User[];
    this.cards = resultList[2] as Card[];
  });
}

in my component, i run the getData method and try to console.log the data but it keeps saying that the data is undefined, even though the api data shows up in the debugging-network tab:

export class MainComponent implements OnInit {
books: Book[];
users: User[];
cards: Card[];
selectedBook: Book;
display: boolean = false;
selectedUser: User;

constructor(public dataService: DataService) { }

ngOnInit() {
  this.dataService.getData();
  //Save data in local component arrays
  this.books = this.dataService.books;
  this.users = this.dataService.users;
  this.cards = this.dataService.cards;

  console.log(this.books); // ==> "undefined"
  }

Upvotes: 1

Views: 644

Answers (1)

Andrew Halil
Andrew Halil

Reputation: 1323

The arrays assigned within the component (after the service call) will already be executed before the service with getData() completes subscribing to the three observables. That is why they are assigning to undefined data.

In your service, modify it to return just the observable:

getData() {
  const observableList: Observable<any>[] = [];

  observableList.push(this.getBooks());
  observableList.push(this.getUsers());
  observableList.push(this.getCards());

  return forkJoin(observableList);
}

In your component then subscribe to the joined data calling getDate() within a subscriber:

this.dataService.getData()
  .subscribe(({resultOne, resultTwo, resultThree}) => {
     //Save data in local component arrays
     this.books = resultOne;
     this.users = resultTwo;
     this.cards = resultThree;
  });
}

Upvotes: 2

Related Questions