CODEWITHSUNDEEP
angularhttprequesthttp-parameters
CaneRandagio
CaneRandagio

Reputation: 378

issue in query params in angular 8

I have a problem with the query parameters in angular 8. This is the code:

headers = {
        headers: new HttpHeaders({
            'Content-Type' : 'application/json',
            'Accept': 'application/json'
        })
    };

login(username, password) {

        console.log('login');

        let params = new HttpParams();
        params = params.append('username', username);
        params = params.append('password', password);
        let options = { headers: this.headers, params: params };

        return this.http.post<any>(this.host + 'login', options).pipe(map(data => {

                console.table(data);
                this.setSession(data);
                this.currentUserSubject.next(data.user);

            }));

    }

I also tried

let params = new HttpParams();
params = params.set('username', username);
params = params.set('password', password);

and

let params = new HttpParams().set('username', username).set('password', password);

and

let params = new HttpParams().append('username', username).append('password', password);

The backend server get username and password as undefined, previously I had this code that worked correctly:

 login(username, password) {

    console.log('login');

    return this.http.post<any>('http://localhost:8080/login?username='+username+'&password='+password, 
        {headers:{
            'Content-Type' : 'application/json',
            'Accept': 'application/json'}} 
    ).pipe(map(data => {

        this.setSession(data);
        this.currentUserSubject.next(data.user);

    }));

}

What's wrong? Thanks

Upvotes: 0

Views: 1288

Answers (4)

menachem walfish
menachem walfish

Reputation: 1

Try send js object after url. For exaple :

Let obj = {username:"username",password:"password"};

this.http.post("your url here",obj).subscribe(your arrow function here);

Good luck!

Upvotes: 0

finki
finki

Reputation: 2123

I'd write it like this

const options = {headers: this.headers, params: {username, password}};
this.http.post<any>(this.host + 'login', null, options);

You need to change your headers object, there's no need for the HttpHeader wrapper around it

headers = {
    'Content-Type' : 'application/json',
    'Accept': 'application/json'
};

Btw: if your don't send a body maybe reevaluate the need for a post request

Upvotes: 0

Poul Kruijt
Poul Kruijt

Reputation: 71911

You are posting the options as body. The third parameter of the http.post should be the options:

let params = new HttpParams();
params = params.append('username', username);
params = params.append('password', password);

const options = { headers: this.headers, params: params };

return this.http.post<any>(this.host + 'login', null, options);

Why is this a post, if there is no body though? Wouldn't a GET make more sense?

Upvotes: 2

sunny singh
sunny singh

Reputation: 119

You should use http.get() method in case there is no body(i.e. you need to modify request method from post to get at backend).

 return this.http.get<any>(this.host + 'login', options).pipe(map(data => {

            console.table(data);
            this.setSession(data);
            this.currentUserSubject.next(data.user);

        }));

or if you want to use post method then use like (but its not a good practice.)

return this.http.post<any>(this.host + 'login', {},options).pipe(map(data => {

        console.table(data);
        this.setSession(data);
        this.currentUserSubject.next(data.user);

    }));

Upvotes: 0

Related Questions