How can a variable be passed in http URL request in ionic 4 with angular?

Question

How to pass variable as parametre in a http request in ionic 4 with angular?


 response: any;

 constructor(private http: HttpClient) { }

async logIn(Companyid: string, Userid: string, Password: string, lat: any, lot: any, deviceid: string) {


 console.log(Companyid, Userid, Password);
 this.http.get('https://www.service.com/App_1.3.5/login.php',
)
  .subscribe(data => {
   this.response = data;
   });

   // console.log(this.response);

   // return this.response
 }
}

I tried as below but its passing as string

export class UrlService {

  response: any;

  constructor(private http: HttpClient) { }

 async logIn(Companyid: string, Userid: string, Password: string,
 lat: any, lot: any, deviceid: string) {

  // tslint:disable-next-line:whitespace
  // const httOptions = ;
  console.log(Companyid, Userid, Password);
  // tslint:disable-next-line:max-line-length
  this.http.get('https://www.service.com/App_1.3.5/login.php?compid=Companyid&username=Userid&password=Password&deviceID=deviceid&latitude=lat&longitude=lot')
   .subscribe(data => {
    this.response = data;
    });

    // console.log(this.response);

    // return this.response
  }
}

So plz help me with how to pass variables as parameters in a http URL request

Tq I solved the issue : solution is as follow: this.http.get('service.com/App_1.3.5/login.php?compid=' + Companyid + '&username=' + Userid + '&password=' + Password + '&deviceID=' + deviceid + '&latitude=' + lat + '&longitude=' + lot + '') .subscribe(data => { this.response = data; });**using + symbol I concortinated the variables with the request URL** — Radeontrax office
– Radeontrax office, Commented Jan 30, 2020 at 9:05

Jejouz · Accepted Answer · 2020-01-30 08:40:08Z

1

You can construct the url with the parameters before passing it to your request:

const baseURL = 'https://www.service.com/App_1.3.5/login.php?';
const queryOptions = 'compid=' + Companyid + '&username=' + Userid; //Keep going
let requestUrl = `${baseURL}${queryOptions}`;

 this.http.get(requestUrl)
  .subscribe(data => {
   this.response = data;
 });
 }

answered Jan 30, 2020 at 8:40

Jejouz

1796 bronze badges

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

Comments

Gvs Akhil · Accepted Answer · 2020-01-30 08:38:02Z

1

You are passing string directly instead of referring to variables, try this:

this.http.get(`https://www.service.com/App_1.3.5/login.php?compid=${Companyid}&username=${Userid}&password=${Password}&deviceID=${deviceid}&latitude=${lat}&longitude=${lot}`)
       .subscribe(data => {
        this.response = data;
        });

        // console.log(this.response);

        // return this.response
      }

Note: Notice that ` is not a single quotation and its tilde in keyboard

answered Jan 30, 2020 at 8:38

Gvs Akhil

2,8962 gold badges23 silver badges40 bronze badges

Comments

Vishwa Deepak Singh · Accepted Answer · 2020-01-30 11:30:40Z

Eg you have LoginPage now go to login.page.ts file and write below code:

 class LoginPage {
    constructor(private loginService: LoginService)
      async login(){
         this.loginService.userLogin(companyid,userId,password,latitude,longitude,deviceId)
.then((data)=>{
                    console.log(data)
                },(err)=>{
                    console.log('error',err);
            })
       }
  }

Now go to your service and write this below code

 async userLogin(companyId,userId,password,lat,log,deviceId){
 const url = 'https://www.service.com/App_1.3.5/login.php';
 let params: any = {
      companyid: companyId,
      userid: userId,
      password: password,
      latitude:lat,
      longitude:log,
      deviceId: deviceId
    };
     return this.httpClient
      .get(url, params)
      .then(data => data);
 }

I think this will solve your problem.

Collectives™ on Stack Overflow

How can a variable be passed in http URL request in ionic 4 with angular?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related