CODEWITHSUNDEEP
jsonangularapiionic-framework
Tygreton
Tygreton

Reputation: 115

IONIC API Undefined

I have an IONIC APP with CORDOVA. I Just want to GET a JSON from an URL.

I Created a service call rest.service.ts

rest.service.ts

import { Injectable } from '@angular/core';
import { HTTP } from '@ionic-native/http/ngx';

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

  BASE_URL = 'http://whatever.....';

  constructor(public http: HTTP) {}

  getProjects() {

    const URL = this.BASE_URL + 'getProjects';

    this.http.get(URL, {}, { 'Content-Type': 'application/json' })
      .then(answer => {

        return JSON.parse(answer.data);

      })
      .catch(error => {
        console.log(error.status);
        console.log(error.error); // error message as string
        console.log(error.headers);
      });

  }

}

Here in this file I can see the info. If I insert something like...

console.log(JSON.parse(answer.data));

I can see the results in JSON just as I Want.

The problem is when I try to use this methods in other files...

otherpage.page.ts

import { Platform } from '@ionic/angular';
import { RestService } from './../rest.service';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-otherpage',
  templateUrl: './otheropage .page.html',
  styleUrls: ['./otherpage .page.scss']
})
export class OtherPage implements OnInit {

  projects;

  constructor(
    public platform: Platform,
    public rest: RestService,
  ) {


    this.projects = this.rest.getProjects();
    console.log(this.projects); // UNDEFINED

  }

  ngOnInit() { }

}

Here... this.projects... is undefined... ¿What is happening? I tried platform.ready, insert in ngOnInit... nothing works.

Upvotes: 0

Views: 373

Answers (1)

Naseer
Naseer

Reputation: 194

You need to modify the service and subscribe this service your page.

 BASE_URL = 'http://whatever.....';
 getProjects() {
    const URL = this.BASE_URL + 'getProjects';
    return this.http.get(URL, {}, { 'Content-Type': 'application/json' });
  }

Subscribe this service observable in your page.ts file.

this.rest.getProjects().subscribe((answer)=>{
    this.projects = JSON.parse(answer.data);
    console.log(this.projects); // here you get the json 
},error=>{
    consoole.log(error)
});

Note:

console.log(this.projects); // UNDEFINED Because this line executes before the http observable send the response, you need to subscribe that http observable to get the json.

Upvotes: 1

Related Questions