CODEWITHSUNDEEP
arraysangulartypescriptionic2
user3369563
user3369563

Reputation:

Angular 2 + Ionic 2: objects push to array, but it is empty when I try to use it

I'm trying to do an application with Ionic2 with imports questions from a JSON file and display them in a test. I was able to successfully import all the questions in the array made of 'uniqueChoiceQuestion' objects. However, when I try to construct the 'questionList' array, the values I pushed into it disappear when I try to use it in another function.

My test.ts

import {Component, OnInit, Input} from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';

/*----- Question Classes -----*/
import {UniqueChoiceQuestion} from './../../classes/questions/uniqueChoiceQuestion/uniqueChoiceQuestion';
//Has id: number, content: string, options: Array<any>
import {QuestionList} from './../../classes/questions/questionList/questionList'
//Has id: number; type: string;

import {GetList} from './../../services/getList/getList';


@Component({
  templateUrl: 'build/pages/test/test.html',
  providers: [GetList]
})

export class TestPage implements OnInit {

  /*----- Questions array -----*/
  public questionsUnique: Array<UniqueChoiceQuestion>;
  public questionList: Array<QuestionList>;

  public firstQuestion: any;

  constructor(private navController: NavController, private getList: GetList) {
  }

 /* On page init, 
  the questions array will be initialised,
  the questions will be loaded on the arrays
  */
  ngOnInit() {
    this.setupArrays();
    this.loadQuestions();

    this.loadFirstQuestion();
  }

  /* Initializes the questions arrays as empty
  */
  setupArrays() {
    this.questionsUnique = [];
    this.questionList = [];
  }

  /* Load the JSON data into the correct type of array
  */
  processQuestionsData(data) {

    for (let i = 0; i < data.length; i++) {

      let question = data[i];

      this["questions" + question.type].push(question);

      this["setUpQuestion" + question.type](this["questions" + question.type].length - 1);

      this.questionList.push(new QuestionList(question.id, question.type));

    }
//Here, the array is printed correctly with all the questions ids and types
    console.log(this.questionList);


  }

  /* Load data into a UniqueChoiceQuestion array
  */
  setUpQuestionUnique(arrayId) {
    let container = this.questionsUnique[arrayId];
    container.viewConstruct = new UniqueChoiceQuestion(
      container.id,
      container.content,
      container.options
    );
  }

  /* Loads questions from a JSON files 
  */
  loadQuestions() {
    this.getList.load()
      .subscribe(
      this.processQuestionsData.bind(this),
      error => console.log("Test - loadQuestions() - Error: ", error)
      );
  }

  loadFirstQuestion() {
//However, when I try to print the array here, it is empty
    console.log(this.questionList);
//That will generate a 'TypeError: Cannot read property 'type' of undefined' error
    let firstQuestion = this["questions" + this.questionList[0].type][this.questionList[0].id];
    this["setUpQuestion" + this.questionList[0].type](this.questionList[0].id);
    console.log(this.firstQuestion);
  }

UPDATE I tried debbuging the program more and now I believe the problem is that this.loadFirstQuestion() is being executed before this.loadQuestions() (on ngOnInit)

Upvotes: 0

Views: 5849

Answers (1)

Venkat Karthikeya
Venkat Karthikeya

Reputation: 11

Load questions is asynchronous. So it starts by executing the async call, doesnt wait for it to complete, then goes to execute loadFirstQuestion. Here you don't get the question list because it isn't loaded yet. You can try calling loadfirstquestion in subscribe. 

.subscribe(
  this.processQuestionsData.bind(this),
  error => console.log("Test - loadQuestions() - Error: ", error),
  ()=>this.loadFirstQuestion();
);

Upvotes: 1

Related Questions