Get Values from my Service to my Page in Ionic 4

ionic 4 navparams
ionic 4 pass data between pages
ionic 4 navcontroller
ionic 4 routing example
ionic 4 get active page
ionic 5 pass data between pages
ionic 4 multiple ion-router-outlet
ionic passing data between pages

Right now I managed to get the DB-Data from my PHP-API. Now I'm struggling to send it from my service to my page.ts. Somehow it keeps being undefined.

Service:

getData(dbargument:String) {

 var headers = {
   'Content-Type': 'application/x-www-form-urlencoded'
 };

  let fullheader = new HttpHeaders( headers );
  let postData = dbargument;
  let postDataJson = JSON.stringify(postData);
  let header = new HttpHeaders();

  let real_header : any = header.append('Content-Type', 'application/x-www-form-urlencoded');

  this.http_post.post('URL is set here', postDataJson, real_header).subscribe(data => {

     console.log("JSONSTRING: " + JSON.stringify(data));

     return data;
 });

} 

Page.ts:

ngOnInit() {

    /* Calling Data on Page load */

    this.platform.ready().then(() => { 
    this.getActiveJobs();

    console.log('Post initialized');

    });

}

getActiveJobs() {

    this.activeJobsID = this.activeJobs.userid;
    this.activeJobsStr = "//Working SQL Statement is here";
    this.activeJobsCount = this.activeJobs.getData(this.activeJobsStr);

    console.log('Post worked');
    console.log(this.activeJobsID);
}

The Variable I'm trying to get the value in is activeJobsCount.

Thanks in advance!

Edit:

Current Problem 1

Edit 2:

It looks the problem lies in the following part :

this.http_post.post('http://kfz-expertus-portal.de/API/dbpost.php', postDataJson, real_header).subscribe(result => {

  console.log("JSONSTRING: " + result);

  return result;

});


the JSONSTRING is shown in the logs but i cant return the result to the page.ts

That's because you are not returning data from service.

getData(dbargument:String) {

 let tmp;

 var headers = {
   'Content-Type': 'application/x-www-form-urlencoded'
 };

  let fullheader = new HttpHeaders( headers );

  let postData = dbargument;

  let postDataJson = JSON.stringify(postData);


  let header = new HttpHeaders();

  let real_header : any = header.append('Content-Type', 'application/x-www-form-urlencoded');

  this.http_post.post('URL is set here', postDataJson, real_header).subscribe(data => {

  console.log("JSONSTRING: " + JSON.stringify(data));

  this.temp = data;

});

return tmp;
} 

Ionic 4 : Setting root page, . html file, if it's not there please add it. 2. Service and Resolve Function (legit) A better way (besides using only an ID and then making another call from the details page) is to use a service in the middle to keep track of your data. Therefore, generate a service and another service that we will use as a resolver (not 100% needed but recommended):

You don't wait for the data, the getData function goes from top to bottom in an instant and returns undefined as it should. You will need to wait for the http post to return and then send it to your page.

getData(dbargument:String): Observable<any> {
  // ... other
  return this.http_post.post('URL is set here', postDataJson, real_header);
}

Call the function from your service and see the result as you subscribe to the getData Observable

ngOnInit() {
  this.getActiveJobs();
}

getActiveJobs() {
  this.yourservice.getData(data).subscribe(result => {
    // result here
  });
}

How to Pass Data with Angular Router in Ionic [v4], How do I get data from API in ionic 4? In order to get the values you need on that page later, simply use a service that holds your information or makes a HTTP request and returns the right info for a given key at any time. All routing logic is officially in place, so now we only need to add a few buttons to our app that allow us to move around.

i fixed it. I just had to return the http-response at once without saving it in result and return it then.

Navigating the Change with Ionic 4 and Angular Router, When you are migrating your Ionic 3 app to Ionic 4 one of the biggest In this Quick Win we will look at 3 different solutions to pass data with Angular Router to your Ionic pages. Before we get into the details we need a testing app. details page) is to use a service in the middle to keep track of your data. When a page becomes the active page, the segment is appended to the URL. The segment can be changed to anything and doesn't have to match the name. For example, passing a value for name and segment: @IonicPage({ name: 'my-page', segment: 'some-path' }) When navigating to this page as the first page in the app, the URL will look something like:

How to Build Your First Ionic 4 App with API Calls, In order to get the values you need on that page later, simply use a service that holds your information or makes a HTTP request and returns the  Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards <!--t.4.5.4.0-->Ionic Docs

How to Pass Data with Angular Router in Ionic 4, The service will take care of handling the API calls and simply return the our first page * @param movieService The movie Service to get data  In Ionic 4, I am trying to use the modalController to open a modal. I am able to open the modal and send componentProps, but I'm not sure how to receive those properties.

[IONIC 4] Navigation Basics & Passing Data Between Pages , In this tutorial we will pass data from one to the next Ionic 4 page on different ways using Duration: 16:04 Posted: Mar 12, 2019 It's time for Ionic v4 content, and what fit better than the all-time classic login flow example? With Ionic 4 it becomes a lot easier to protect our apps the real Angular way using the Angular Router. Inside this (quite long) tutorial we will build a dummy authentication flow logic for an Ionic 4 app using Angular. We are not going to use a real backend or users, but you can easily plug in

Comments
  • Hello and thank you at first! i changed it to your code, while changing "this.temp=data" to to tmp = data. i think you meant tmp and "this." shouldnt be necessary, because this is no instance right?
  • Yes, you are right, delete 'this' from the code. I hope it works.
  • Unfortunately it doesnt. it looks like the returning tmp has no value;
  • Is console.log("JSONSTRING: " + JSON.stringify(data)) printing anything?
  • Also it's better to use subscribe in your page like @tomas-vancoillie suggested
  • thank you! :) I did it and got the following error: core.js:9110 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'subscribe' of undefined TypeError: Cannot read property 'subscribe' of undefined. Im looking for a solution right now
  • Is your http_post variable, the injected HttpClient?
  • Yes, constructor is the following: constructor(private http_post: HttpClient) { }
  • Just found out that ``` this.activeJobs.getData(this.activeJobsStr) ``` is undefined
  • You should check whether you receive any data back from the POST. Does your php api send data back? You can check this with postman if you like (getpostman.com)