How to call api in ionic using post request and by passing 2 parameters?

Question

I am learning to call api in ionic for sign in purpose. and I don't know the proper way to call it.

I have tried to call it but it did not success!

signin.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { HTTP } from '@ionic-native/http'

@Component({
  selector: 'page-sign-in',
  templateUrl: 'sign-in.html',
})
export class SignInPage {

  private signinUrl:"*someurl*";

  email="";
  password="";

  constructor(public navCtrl: NavController, public navParams: NavParams,
  private http:HTTP) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SignInPage');
  }

  signinClick(){
    this.callSignInApi(this.email,this.password);
  }

  callSignInApi(email:string,password:string){
    console.log('api email',email);
    console.log('api pass',password);

    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('username', email);
    urlSearchParams.append('password', password);

    this.http.post(this.signinUrl,urlSearchParams.toString(),{})
    .then(data => {

      console.log("data status",data.status);
      console.log("data data",data.data); // data received by server
      console.log("data headers",data.headers);

    })
    .catch(error => {

      console.error("catching error",error);
      console.log("error status",error.status);
      console.log("error error",error.error); // error message as string
      console.log("error headers",error.headers);

    });
  }

}

Everytime when I click on the button to call the api, It gives me error (but, error is also null). Even I don't know what the error is.
Can anyone guide me how to call api in proper way, and how to pass the parameters in proper way.

are you using http from import { Http } from '@angular/http'; — Berk Akkerman
– Berk Akkerman, Commented May 14, 2018 at 7:37
It is always worth taking a look in the network tab of your developer tools to see the actual request being made. I suspect that urlSearchParams.toString() is not doing what you need. — Fenton
– Fenton, Commented May 14, 2018 at 7:37
you can solve using different way but standard way you need to create service for http request handling — Utpaul
– Utpaul, Commented May 17, 2018 at 12:11

Berk Akkerman · Accepted Answer · 2018-05-14 07:52:35Z

1

You can use Http from @angular/http and make a proper api call.

First add to app.module.ts:

import { HttpModule } from '@angular/http'; imports: [ .., HttpModule,

add your page:

inject http: constructor(public http: Http,.....

api call:

this.http.post(this.signinUrl,urlSearchParams.toString(), {}).subscribe( data=>{ ...... },error=>{ ..... });

answered May 14, 2018 at 7:52

Berk Akkerman

4831 gold badge3 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Riddhi Shah Over a year ago

Same url I am using in my another android app. And it is working fine there.

Sanoj_V · Accepted Answer · 2018-05-14 08:22:09Z

1

Try this :

let urlSearchParams  = {
      'username': email,
      'password': password
  };

this.http.post(this.signinUrl,urlSearchParams,{})
    .then(data => {
         // data received by server
     })
     .catch(error => {
         // error message as string
     });

hope this will work!, if not try using headers like

this.http.post(this.signinUrl,urlSearchParams,{'Content-Type': 'application/x-www-form-urlencoded'})
.then(data => {
  // data received by server
})
.catch(error => {
  // error message as string
});

answered May 14, 2018 at 8:22

Sanoj_V

2,9961 gold badge14 silver badges33 bronze badges

1 Comment

Riddhi Shah Over a year ago

Still getting same results! getting error. (but the object of error is also null).

keval nayak · Accepted Answer · 2018-05-15 07:43:24Z

1

Try to convert parameter object to URI and then pass like below my working example

this.http.post(this.signinUrl,this.formdata(urlSearchParams),{'Content-Type': 'application/x-www-form-urlencoded'})
.then(data => {
 // data received by server
})
.catch(error => {
// error message as string
});



/** Convert Object to parameter to send in http request (For not sending json object) */
 formData(myFormData) {
   return Object.keys(myFormData).map(function (key) {
     return encodeURIComponent(key) + '=' + encodeURIComponent(myFormData[key]);
 }).join('&');
}

answered May 15, 2018 at 7:43

keval nayak

2541 gold badge2 silver badges11 bronze badges

Comments

Prachi · Accepted Answer · 2018-05-14 07:59:35Z

0

Import from Angular's HTTP package.

import { Http } from '@angular/http';

and remove toString() in case of HTTP POST request:

this.http.post(this.signinUrl,urlSearchParams).subscribe(
    data=>{
    ......
   },error=>{
    .....
   });

answered May 14, 2018 at 7:59

Prachi

3,60421 silver badges38 bronze badges

5 Comments

Riddhi Shah Over a year ago

I've replaced import statement. and chaged code as you told, but now i am getting runtime error that StaticInjectorError(AppModule)[SignInPage->Http]: NullInjectorError: No provider for Http!

Prachi Over a year ago

You might not be having HttpModule in your AppModule ts file. Use import { HttpModule } from '@angular/http'; and add in imports section.

Riddhi Shah Over a year ago

After adding this, I am getting error status 404 when I click sign in button to call api

Sanoj_V Over a year ago

U should parse object into string JSON.stringify(urlSearchParams); in post method

Riddhi Shah Over a year ago

@Sanoj_V using JSON.stringify(urlSearchParams); did not work

Collectives™ on Stack Overflow

How to call api in ionic using post request and by passing 2 parameters?

4 Answers 4

1 Comment

1 Comment

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related