Return from function doesn’t work (ionic) - ionic-framework

Question

im tryng to get the response from this http.get
getChatId(emailTo): any {
var email = emailTo
const httpOptions = {
headers: new HttpHeaders({
'Accept': 'application/json',
'Content-Type': 'application/json',
'Token': this.token_value
})
};
this.httpClient.get("https://xxxx=" + email, httpOptions)
.subscribe(data => {
console.log(data['_body']);
return data
}, error => {
console.log(error);
return error
});
}
this inside my constructor
this.getChatId(this.emailTo).then((date) => {
var docRef = firebase.firestore().collection("xxx").doc(date.response);
docRef.onSnapshot((doc) => {
this.document = doc.data()
let chats_message = [];
for (let k in this.document.messages) {
chats_message.push(this.document.messages[k]);
}
chats_message.sort(function (a, b) { return a.id - b.id; })
this.messages_chat = chats_message;
this.content.scrollToBottom(300);//300ms animation speed
console.log("Array", this.messages_chat);
})
});
but it give me this error:
vendor.js:1823 ERROR Error: Uncaught (in promise): TypeError: Cannot
read property 'subscribe' of undefined TypeError: Cannot read property
'subscribe' of undefined

Answer 1

Subscribe is not a function in httpclient while the request. please follow the below code
import { Component } from '#angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '#angular/common/http';
#IonicPage()
#Component({
selector: 'page-sample',
templateUrl: 'sample.html',
})
export class SamplePage {
sampleDatas: Observable<any>;
constructor(public navCtrl: NavController, public httpClient: HttpClient) {
this.films = this.httpClient.get('https://swapi.co/api/films');
this.sampleDatas
.subscribe(data => {
console.log('my data: ', data);
})
}

Answer 2

You should rewrite your function as an Observable to interact with the httpclient. Preferably in a service file like ChatService. You can design the http request with models or any types you receive or send.
export class ChatService {
constructor(private http: HttpClient) {}
getChatId(emailTo: string): Observable<any> {
return this.httpClient.get<any>("https://xxxx=/" + email);
}
}
Call the http request on a page with the service injected in the constructor.
constructor(private chatService: ChatService) {}
getChatId() {
this.chatService.getChatId(this.emailTo).subscribe(
result => {
// do something with result
},
error => {
// do something with error
}
);
}
EDIT
If you work with models to pass and receive data in the http request, you can define them as type. https://blog.angular-university.io/angular-http/
import { User } from '../models/user';
export class ChatService {
constructor(private http: HttpClient) {}
getChatId(emailTo: string): Observable<User> {
return this.httpClient.get<User>("https://xxxx=/" + email);
}
}