Array is empty on angular typescript page

Question

I'm filling my string 'Questions' with a function named 'getQuestionsWithInterviewId' but when I call it with the console.log in the ngOnInit and ngAfterContentInit methods it looks empty.

import { Component, OnInit } from '@angular/core';
import { QuestionService } from '../_services/question.service';
import { Question } from '../_models/model';

@Component({
   selector: 'app-interview',
   templateUrl: './interview.component.html'
 })

 export class InterviewComponent implements OnInit {

 questions: Question[]=[];

 constructor(private questionService: QuestionService) {

 }

 ngOnInit(): void {
 }

 ngAfterContentInit() {
    this.getQuestionsWithInterviewId(1);
    console.log(this.questions);

    $(".tab-wizard").steps({
      headerTag: "h6",
      bodyTag: "section",
      transitionEffect: "fade",
      titleTemplate: '<span class="step">#index#</span> #title#',
      labels: {
        finish: "end"
      },
      onFinished: function (event, currentIndex) {
        alert("end");
      }
    });

  }

  getQuestionsWithInterviewId(interviewId: number) {
    this.questionService.getQuestionsWithInterviewId(interviewId).subscribe(a => {
    this.questions = a;
  },
  error => {
    console.log(error);
  });
 }

}

but when I use the 'questions' array on the component.html page, I can see the results.

If I do the console.log operation within the 'getQuestionsWithInterviewId' function, I can get results.

getQuestionsWithInterviewId(interviewId: number) {
this.questionService.getQuestionsWithInterviewId(interviewId).subscribe(a => {
  this.questions = a;
  console.log(this.questions);
},
  error => {
    console.log(error);
  });
 }

question.service.ts page;

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Question } from '../_models/model';

@Injectable({
  providedIn: 'root'
})
export class QuestionService {

  baseUrl: string = 'https://localhost:44388/api/questions/';

  constructor(private http: HttpClient) {

  }

  getQuestionsWithInterviewId(interviewId: number): Observable<Question[]> {
    return this.http.get<Question[]>(this.baseUrl + 
"GetQuestionsWithInterviewId/" + interviewId);
  }


}

Temoncher · Answer 1 · 2020-08-09T15:15:52.917

0

It is because getQuestionsWithInterviewId uses observable from questionService.

questions is populated when you assign this.questions = a. This happens when subscription is fired. Subscription fires only after all call stack is empty. So this happens right after ngAfterContentInit finishes executing.

To perform manupulations with data from subscription, you must do it in a subscribe callback.

Update

ngOnInit() {   
    this.questionService.getQuestionsWithInterviewId(1).subscribe(a => {
      this.questions = a;
      // this console log will do
      console.log(this.questions);
      // feel free to do your magic with questions here
    },
}

edited Aug 09 '20 at 15:15

answered Aug 09 '20 at 11:17

Temoncher

644
5
15

how can i do? i shared question.service.ts page – Furkan Doğanay Aug 09 '20 at 12:15
@pbachman posted functioning example. In his case console log will log questions correctly – Temoncher Aug 09 '20 at 15:14

score 0 · Answer 2 · answered Aug 09 '20 at 12:29

you don't need an extra method "getQuestionsWithInterviewId" in your component, you can call the service directly. I would recommend to do it on ngOnInit, like this:

ngOnInit() {   
    this.questionService.getQuestionsWithInterviewId(1).subscribe(a => {
      this.questions = a;
      console.log(this.questions);
    },
    error => {
        console.log(error);
      });
    }
    
    $(".tab-wizard").steps({
        headerTag: "h6",
        bodyTag: "section",
        transitionEffect: "fade",
        titleTemplate: '<span class="step">#index#</span> #title#',
        labels: {
          finish: "end"
        },
        onFinished: function (event, currentIndex) {
          alert("end");
        }
     });
}

Array is empty on angular typescript page

2 Answers2

Update