Ionic -Typeerror: .then() is not a function

Question

I have tried to get data from assets/data/people-data.json in Ionic. In my providers/people-data.ts

getLocalData(){
 try{
  this.http.get('assets/data/people-data.json').map(res => res.json()).subscribe(data => {
   return data;
  });
 }
  catch (error) {
   console.log("Error in httprequest");
   return this.data;
 }
 return this.data;
}

In my search.ts page(where I need the data to be published) the code is as follows

generateData() {
 try {
  this.peopleData.getLocalData().then((result) =>{
   console.log("data recieved")
  });
} catch (error) {
   console.error("Couldnot fetch data",error);
  }
}

you have mixed observables and promises.. – Suraj Rao Jul 30 '18 at 11:12 — Suraj Rao, Jul 30 '18 at 11:12

dasfdsa · Accepted Answer · 2018-07-30T12:12:13.820

This is because getLocalData should return a Promise but its actually returning undefined (or whatever this.data is, at the start of getLocalData).

Following will work fine. Here, getLocalData returns an observable and generateData subscribes to it.

getLocalData(){
    return this.http.get('assets/data/people-data.json').map(res => res.json())
}

generateData(){

    this.peopleData.getLocalData().subscribe(
        (result) =>{
        console.log("data recieved")
    }, (err)=>{
            console.log("Error in httprequest");
        }
    );
}

Problem in your code:

Observables and Promises are two patterns used to deal with asynchronous code (Others are: callbacks, asyn-await).

An Observable and Promise, both are Javascript Object. Both are like a proxy for a value which will be arriving later in time. When the value has arrived (its called resolved value), you use .subscribe() if you are extracting resolved value from Observable but .then() if you are using extracting resolved value from Promise.

In your case this.http.get('assets/data/people-data.json') returns an Observable. Also this.http.get('assets/data/people-data.json').map(res => res.json()) returns modified Observable. But you trying to use .then() to extract it, which is not correct.

Also, you were returning, observable.map().subscribe() which does Not return an Observable, rather a subscription Object. This is a common gotcha by beginners.

Promises and Observables are deceptively similer. Better to learn them to some extent before using in your code.

No. Try catch only work for synchronous code. Dont put try catch in `getLocalData`. Just run my code, as it is. — dasfdsa, Jul 30 '18 at 11:25
thank you dasfdsa. Its working. It will be greatly appreciated if you tell my what was the mistake in my code.Thank you in advance — Jose Augustine, Jul 30 '18 at 11:28

Ionic -Typeerror: .then() is not a function

1 Answers1