Ionic 3 httpClient for Http Module

Question

I'm following this Tutorial for my Ionic app. This using http Module.But now angular 4+ has httpClient. I have done some changes according to that. Now app is working fine until I start. When I restart the app it shows the error

Property 'questions' does not exist on type 'Object'.

but again when I hit ctrl+s and save changes error is disappeared. How can I fix this??

Json is

 {
    "questions": [

        {
            "flashCardFront": "<img src='assets/imgs/helicopter.png' />",
            "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/imgs/plane.png' />",
            "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/imgs/truck.png' />",
            "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}
            ]
        }
    ]
}

Here is my code in provider using 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; //error here
            resolve(this.data);
        });
    });
 }

Can you add the json to the question ?

Anuradha Gunasekara
– Anuradha Gunasekara

2018-06-19 05:44:37 +00:00
Commented Jun 19, 2018 at 5:44 — Anuradha Gunasekara
– Anuradha Gunasekara, Commented Jun 19, 2018 at 5:44
@Anuradha Gunasekara done

LVW23
– LVW23

2018-06-19 06:46:44 +00:00
Commented Jun 19, 2018 at 6:46 — LVW23
– LVW23, Commented Jun 19, 2018 at 6:46

Charmi · Accepted Answer · 2018-06-19 06:25:44Z

2

Hi you have to add latest http into your project FIDDLE DEMO

npm install @angular/http@latest --save

Next, open and edit 'src/app/app.module.ts' then add this import.

imports: [
   BrowserModule,
   HttpClientModule,
   IonicModule.forRoot(MyApp)
],

Next add http into your .ts file

import { HttpClient } from '@angular/common/http';

create variable in constructor

constructor(public http: HttpClient) {
     console.log('Hello RestServiceProvider Provider');
}

Then use it

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

  return new Promise(resolve => {
      this.http.get('https://jsonplaceholder.typicode.com/posts/1').subscribe(data => {
          this.data = data //error here
          alert(JSON.stringify(data));
          resolve(this.data);
      });
  });
}

answered Jun 19, 2018 at 6:25

Charmi

212 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

LVW23 Over a year ago

I know need to add a constructor to use any module

Charmi Over a year ago

Check the fiddle demo and you can just replace your file and check it will work for you or not

Vikas Over a year ago

npm install @angular/http@latest --save not required at all see from which package you are importing HttpClient -> '@angular/common/http';

Cristian Rivas Gómez · Accepted Answer · 2018-06-19 05:59:37Z

1

Try adding any type to your data on .subscribe like so:

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

    return new Promise(resolve => {
        this.http.get('assets/data/questions.json').subscribe((data: any) => {
            this.data = data.questions;
            resolve(this.data);
        });
    });
}

answered Jun 19, 2018 at 5:59

Cristian Rivas Gómez

1361 silver badge5 bronze badges

1 Comment

LVW23 Over a year ago

Fixed the problem using the answer

Rajeshkumar Kandhasamy · Accepted Answer · 2018-06-19 06:07:30Z

0

Probably you are missing the key point which is .map(res => res.json()) and then .subscripe the data.

this.http.get('assets/data/questions.json').map(res => res.json()).subscribe(data => {
       this.data = data.questions;
       resolve(this.data);
});

I think, Since the response contains json object and which has questions: [] array, but this piece of code tries to access one level before this.data = data.questions; which is not mapped yet.

Hope this helps.,

edited Jun 19, 2018 at 6:07

answered Jun 19, 2018 at 5:57

Rajeshkumar Kandhasamy

6,4997 gold badges61 silver badges84 bronze badges

1 Comment

Vikas Over a year ago

Nope in HttpClientModule response object is a JSON by default, so there's no need to parse it anymore.

Collectives™ on Stack Overflow

Ionic 3 httpClient for Http Module

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related