CODEWITHSUNDEEP
angularapiionic3angular5
Aaron Williamson
Aaron Williamson

Reputation: 3

ionic 3, angular 5 API integration

I'm trying to include an API with my new ionic application. I'm using Ionic 3.9.2 which uses Angularjs 5. I don't have any experience with these newer updates.

This is included in my data.ts file (my provider)

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

@Injectable()
export class DataProvider {

   private url = "https://api.myjson.com/bins/opju3";

   constructor(public http: HttpClient) {
     console.log('Hello DataProvider test4');
   }

   getData(){
    return this.http.get(this.url)
    .subscribe(response => this.response = response.json());
   }

}

In my home.ts file I have this code

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

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

export class HomePage {



  constructor(public navCtrl: NavController, public dataProvider: 
DataProvider) {
    console.log("before.getData");

  }
  ionViewDidLoad(){
    this.dataProvider.getData();  
  }

}

It may be worth noting that I'm running it in the Cloud9 IDE so I don't have the best error messages. When I run it currently, the errors I receive are: 

 [16:17:43]  typescript: src/providers/data/data.ts, line: 16 
        Property 'response' does not exist on type 'DataProvider'. 

  L15:  return this.http.get(this.url)
  L16:  .subscribe(response => this.response = response.json());

  [16:17:43]  typescript: src/providers/data/data.ts, line: 16 
        Property 'json' does not exist on type 'Object'. 

  L15:  return this.http.get(this.url)
  L16:  .subscribe(response => this.response = response.json());

Thank you all!

EDIT: You all answered my question perfectly. It is working without a hitch now. Thank you so much.

Upvotes: 0

Views: 451

Answers (2)

Lucas Basquerotto
Lucas Basquerotto

Reputation: 8063

About the first error:

Property 'response' does not exist on type 'DataProvider'.

You don't have a response property in your class DataProvider. You can solve it declaring the property:

@Injectable()
export class DataProvider {

   private url = "https://api.myjson.com/bins/opju3";
   private response: any;
   ...

About your second error:

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

Angular HttpClient already returns the body of the response, and not the HttpResponse (unless you use the observe option). So you don't need to call response.json():

.subscribe(response => this.response = response);

I advise you to return the observable from your service and subscribing to it in your page, like in the answer from @Vikas.

Upvotes: 1

Vikas
Vikas

Reputation: 12036

The new HttpClient by default formats the response to JSON so we no longer need to parse it using response.json(): if you want to parse your response you should use map operator which is used to parse the response in the desired format in your case its json and it returns an observable which shall be subscribed. For example:

this.httpClient.get(this.url)
  .map(response => response.json())
  .subscribe(data=>console.log(data));

But it's not required anymore
Modify your code : data.ts

import { Observable } from 'rxjs/Observable';
     getData():Observable<any>{
        return this.http.get(this.url);

       }

home.ts 

 ionViewDidLoad(){
    this.dataProvider.getData().subscribe(value=>{console.log(value);//your logic});  
  }

Upvotes: 1

Related Questions