How to pass url arguments (query string) to a HTTP POST request on ionic 3

Question

I don't know how to call a post service with query string. when we run below url with post method : https://test.data.com/myAPI/Login/authenticateUser?username=temp&password=Temp@123&regid=''&versions=1&deviceType=1 in postman its working perfectly fine but don't how to pass query string in ionic 3 code

In below code when we pass query string as param, it gives a bad request error.

return this.http.post("https://test.data.com/myAPI/Login/authenticateUser", params).subscribe((data: any) => {
  // let resp = data;
  // this.items = JSON.parse(JSON.parse(resp).Data);
  console.log('my data: ', data);
}, err => {
  console.log(err);
});

your postman request looks like a get with url parameters.. in your app you are doing a post with body params.. — Suraj Rao
– Suraj Rao, Commented Jan 9, 2018 at 6:35
checkout stackoverflow.com/questions/45470575/…. Just instead of get in ques, do post in ur case — Dhyey
– Dhyey, Commented Jan 9, 2018 at 6:40
@SurajRao : No It's a post request only. see the attachment in my ques. — Priyank
– Priyank, Commented Jan 9, 2018 at 6:42

Dhyey · Accepted Answer · 2018-01-09 07:20:32Z

5

Instead of passing an object you need to pass a string appended to the url like below:

let urlSearchParams = new URLSearchParams();
urlSearchParams.append('username', 'temp');
urlSearchParams.append('password', "Temp@123");
urlSearchParams.append('regid', "");
urlSearchParams.append('versions', "1");
urlSearchParams.append('deviceType', "1");

return this.http.post("https://test.data.com/myAPI/Login/authenticateUser?' + urlSearchParams.toString(), null).subscribe((data: any) => {
    // let resp = data;
    // this.items = JSON.parse(JSON.parse(resp).Data);
    console.log('my data: ', data);
}, err => {
    console.log(err);
});

You can check the network tab of your dev console now, the URL in there and postman should be the same.

answered Jan 9, 2018 at 7:20

Dhyey

4,3453 gold badges28 silver badges34 bronze badges

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

Comments

Mohit Dixit · Accepted Answer · 2018-01-09 07:06:54Z

1

You need to check the params you are posting as post data to the call. Below is the example.

    let postData = {};
                postData.id = this.id;
                postData.name = 'Test';
                PostRequest(this.BaseUrl + 'api/admin/edit/question', postData).then(res => {
                    if (res) {
                    }
               });

double sure the names of params you are sending. Also, need to check if you are sending the proper token value to the request???

answered Jan 9, 2018 at 7:06

Mohit Dixit

3291 gold badge6 silver badges11 bronze badges

1 Comment

Dhyey Over a year ago

Because you and OP have done the same thing. In the ques, OP is already passing the object this.http.post("https://test.data.com/myAPI/Login/authenticateUser", params). Your postData and his params are the same thing. While the URL in the ques requires query string. So to make ur ans valid u would need to convert postData into query string eg: ?id=1&name=Test. You can refer to my answer about how to do that.

Juan Angel · Accepted Answer · 2019-07-26 13:28:04Z

Found this in another thread, ES6 and works great with nested objects:

objectToQueryParams(params, keys = [], isArray = false) {
    const p = Object.keys(params).map(key => {
        let val = params[key]

        if ("[object Object]" === Object.prototype.toString.call(val) || Array.isArray(val)) {
            if (Array.isArray(params)) {
                keys.push("")
            } else {
                keys.push(key)
            }
            return this.objectToQueryParams(val, keys, Array.isArray(val))
        } else {
            let tKey = key

            if (keys.length > 0) {
                const tKeys = isArray ? keys : [...keys, key]
                tKey = tKeys.reduce((str, k) => {
                    return "" === str ? k : `${str}[${k}]`
                }, "")
            }
            if (isArray) {
                return `${ tKey }[]=${ encodeURIComponent(val) }`
            } else {
                return `${ tKey }=${ encodeURIComponent(val) }`
            }

        }
    }).join('&')

    keys.pop()
    return p
}

Collectives™ on Stack Overflow

How to pass url arguments (query string) to a HTTP POST request on ionic 3

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related