Retrieve Data from using HTTP in ionic

Ionic Framework
1

Hi all,

Sorry if this is a stupid question I am trying to retrieve data from MYSQL database I have done the part where I can add data to database but now when I try to retrieve data I have the following error: property result doesn’t exist on type response, but when I have console.log data without the below for I have result in data, can someone please help me to resolve this issue.

Thank you

LoadData() {

        return new Promise(resolve => {

            let body = {

                aksi: "getdata"

            };

            this.provider.postData(body, "proses-api.php").subscribe(data => {

                for (let anunt of data.result) {

                    this.infos.push(anunt);

                    console.log(this.infos);

                }

                resolve(true);

            });

        });

    }
2

It’s far from a stupid question, but I think in order to answer it properly it’s necessary to restructure this code rather drastically. I don’t want to completely overwhelm you with an avalanche of concerns over what we have so far, so I would highly recommend you take the time to go through the Tour of Heroes chapter 6, which covers HTTP requests, and try to emulate the idioms you see in there as faithfully as you can.

So for the sake of figuring out the proximate cause of your immediate problem, please just take the following as temporary gospel and let us know what the results of the experiment are.

I’m going to assume that the function you posted here comes from a page decorated with @Component. If that’s not the case, please make or find such a page and that’s where its replacement is going to go. I’m also going to assume that there’s a service (we’ll call it a Provider to conform with your property naming) that you inject into the page constructor via something like:

class Page {
  constructor(private provider: Provider) {}
}

Again, if that’s not how things are working now, please make them do so at least for the time being.

We’ll leave the internals of Provider.postData intact, but it must have a signature that looks like this:

postData(body: any, endpoint: string): Observable<any> {
  // stuff in here
}

Now onto Page. Add the following bits to it (or change the relevant existing parts to look like this):

class Page {
  infos: any;
  constructor(private provider: Provider) {}
  ngOnInit(): void {
    this.provider.postData({aksi: "getdata"}, "proses-api.php")
      .subscribe(infos => this.infos = infos);
  }
}

…and in its template:

<div>{{infos | json}}</div>

Copy and paste what gets displayed in that <div>, please. If you get errors, let us know the error message (as text, not an image).

3

Hi,

Thanks a lot for the fast reply, yes your assumptions are right my provider is injected into my constructor and the service has that structure, I have changed the code according to your comments, and yes know I am retrieve the data as should but if I can ask another question now my div looks like this

image

but actually I will like to have only the result from the body and to be able to iterate as a list in html with *ngfor, how can I make this happen?

4

It would have been much easier for me if that had been text instead of an image.

If you have control over this API, it would be nice if this method got converted to be an actual GET instead of a POST, but for the time being I’ll deal with it as it is. Now we get to get rid of all the anys, which is also very important in real apps:

// named Flathead because I have absolutely no clue what we are looking at here
export interface Flathead {
  titlu: string;
  desc: string;
  cat: string;
  tel: string;
}

class Provider {
  allFlatheads(): Observable<Flathead[]> {
    return this.postData({aksi: "getdata"}, "proses-api.php").pipe(
      map(rsp => rsp.result));
  }
}

class Page {
  flatheads: Flathead[] = [];
  constructor(private provider: Provider) {}
  ngOnInit(): void { this.refresh(); }
  refresh(): void {
    this.provider.allFlatheads().subscribe(fhs => this.flatheads = fhs);
  }
}

<div *ngFor="let flathead of flatheads">
  <div>titlu: {{flathead.titlu}}</div>
</div>

Important differences from where we started out:

  • no instantiating needless Promise
  • methods in camelCase, not PascalCase
  • types on everything, including function arguments and return values
  • all data wrangling in provider; page sees only an Observable of business objects
  • no side effects in functions
  • idempotent and self-contained

Happy coding with Ionic going forward!

5

Thanks a lot for all the help provided, I will go study Http request further as suggested in the first place, no everything works as it should