FIXED-IONIC 3: property 'questions' does not exist on type 'Object'

Question

i'm having an error regarding this 1 line and I've tried different sources to fix it but unfortunately I can't. Any help through this? I'm running a simple quiz and don't mind the data presented atm.

Here is my data.ts. Here is where I'm having trouble at.

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';

/*
  Generated class for the DataProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class DataProvider {


  data: any;

  constructor(public http: HttpClient) {

  }

  load(){

    if(this.data){
        return Promise.resolve(this.data);
    }

    return new Promise(resolve => {

        this.http.get('assets/data/questions.json').subscribe(data => {
            this.data = data.questions; <----------THIS IS LINE IS DISPLAYING ERROR
            resolve(this.data);
        });

    });

  }

}

Here is my json file which is named questions.json

{
    "questions": [

        {
            "flashCardFront": "<img src='assets/questionimg/12_plate1.gif' />",
            "flashCardBack": "Helicopter",
            "flashCardFlipped": false,
            "questionText": "What is this?",
            "answers": [
                {"answer": "Helicopter", "correct": true, "selected": false},
                {"answer": "Plane", "correct": false, "selected": false},
                {"answer": "Truck", "correct": false, "selected": false}
            ]
        },
        {
            "flashCardFront": "<img src='assets/questionimg/8_plate2.gif' />",
            "flashCardBack": "Plane",
            "flashCardFlipped": false,
            "questionText": "What is this?",
            "answers": [
                {"answer": "Helicopter", "correct": false, "selected": false},
                {"answer": "Plane", "correct": true, "selected": false},
                {"answer": "Truck", "correct": false, "selected": false}
            ]
        },
        {
            "flashCardFront": "<img src='assets/questionimg/29_plate3.gif' />",
            "flashCardBack": "Truck",
            "flashCardFlipped": false,
            "questionText": "What is this?",
            "answers": [
                {"answer": "Helicopter", "correct": false, "selected": false},
                {"answer": "Plane", "correct": false, "selected": false},
                {"answer": "Truck", "correct": true, "selected": false}
            ]
        }

    ]
}

my TypeScript file which is where I generate the quiz.

import { Component, ViewChild} from '@angular/core';
import { NavController} from 'ionic-angular';
import { DataProvider } from '../../providers/data/data';

/**
 * Generated class for the IshiharaQuestionsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  selector: 'page-ishihara-questions',
  templateUrl: 'ishihara-questions.html',
})

export class IshiharaQuestionsPage {

  @ViewChild('slides') slides: any;

    hasAnswered: boolean = false;
    score: number = 0;

    slideOptions: any;
    questions: any;

  constructor(public navCtrl: NavController, public dataService: DataProvider) {
  }

  ionViewDidLoad() {

    this.slides.lockSwipes(true);

    this.dataService.load().then((data) => {

        data.map((question) => {

            let originalOrder = question.answers;
            question.answers = this.randomizeAnswers(originalOrder);
            return question;

        });     

        this.questions = data;

    });

  }

  nextSlide(){
    this.slides.lockSwipes(false);
    this.slides.slideNext();
    this.slides.lockSwipes(true);
  }

  selectAnswer(answer, question){

    this.hasAnswered = true;
    answer.selected = true;
    question.flashCardFlipped = true;

    if(answer.correct){
        this.score++;
    }

    setTimeout(() => {
        this.hasAnswered = false;
        this.nextSlide();
        answer.selected = false;
        question.flashCardFlipped = false;
    }, 3000);
  }


  randomizeAnswers(rawAnswers: any[]): any[] {

    for (let i = rawAnswers.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * (i + 1));
        let temp = rawAnswers[i];
        rawAnswers[i] = rawAnswers[j];
        rawAnswers[j] = temp;
    }

    return rawAnswers;

  }

  restartQuiz() {
    this.score = 0;
    this.slides.lockSwipes(false);
    this.slides.slideTo(1, 1000);
    this.slides.lockSwipes(true);
  }
}

and lastly my ion-html file which I display my quiz.

<ion-content>

  <ion-slides #slides>

      <ion-slide class="start-slide">
          <button ion-button color="primary" (click)="nextSlide()">Start!</button>
      </ion-slide>

      <ion-slide *ngFor="let question of questions; let i = index;">

          <h3>Question {{i+1}}</h3>

          <flash-card [isFlipped]="question.flashCardFlipped">
              <div class="flash-card-front" [innerHTML]="question.flashCardFront"></div>
              <div class="flash-card-back" [innerHTML]="question.flashCardBack"></div>
          </flash-card>

          <h3>{{question.questionText}}</h3>

          <ion-list no-lines radio-group>

              <ion-item *ngFor="let answer of question.answers; let i = index;">

                  <ion-label>{{i+1}}. {{answer.answer}}</ion-label>
                  <ion-radio (click)="selectAnswer(answer, question)" [checked]="answer.selected" [disabled]="hasAnswered"></ion-radio>

              </ion-item>

          </ion-list>

      </ion-slide>

      <ion-slide>
          <h2>Final Score: {{score}}</h2>

          <button (click)="restartQuiz()" ion-button full color="primary">Start Again</button>

      </ion-slide>

  </ion-slides>

</ion-content>

Answer 1

You need to change the response to the type of any as follows,

this.http.get('assets/data/questions.json').subscribe((data:any) => {