How to pass request model to get API on Angular 7/8?

Question

I have Get Api to get users data where I can pass a request model to search users list based on request model. Its working fine on Postman but while I am trying to implement same in Angular 7 and 8 its not working.

Please guide me how can I implement.

My implementation is as below

Postman

    URL = http://localhost:64888/api/Users/SearchUsers     
    Header : Content-Type = application/json

    Body = 
    {
        "firstname" : "value",
        "lastname" : "value",
        "emailid" : "value",
        "usertype" : "value",
    }

Postman Result: Its working fine and gives users list

Request Model

export class UserRequest {  
     firstname : string;
     lastname : string;
    emailid : string;
    usertype : string;
    }

User Service

    export class UserService {

      constructor(private http: HttpClient) { }

      SearchUsers(requestParam : UserRequest) : Observable<any>{  

        const httpOptions = {
          headers: { 
          'Content-Type': 'application/json',
          'Authorization' : 'Bearer Tokenvalue'
          },
          params: requestParam
        };

        return this.http.get("http://localhost:64888/api/Users/SearchUsers", httpOptions); 
      }
    }

User Component

   export class UserComponent implements OnInit {

     constructor(private userService : UserService) { }

     ngOnInit() {

       var requestParam : UserRequest;
       requestParam.firstname = "r";
       requestParam.lastname = "";
       requestParam.emailid = "";
       requestParam.usertype = "user";

       this.userService.SearchUsers(requestParam)
         .subscribe( 
           data => {
             console.log(data);
           }
          )
     }
   }

Can you provide stackblitz or fiddle for the same – Sudhir Sapkal Feb 08 '20 at 13:31 — Sudhir Sapkal, Feb 08 '20 at 13:31
You are very likely having a CORS issue here. – MikeOne Feb 08 '20 at 15:15 — MikeOne, Feb 08 '20 at 15:15

score 0 · Answer 1 · answered Feb 08 '20 at 12:06

If you want to send param in body then use POST request, Mostly In GET request param is being sent in url please see this link see this

convert your request like this

 SearchUsers(requestParam : UserRequest) : Observable<any>{  

    const httpOptions = {
      headers: { 
      'Content-Type': 'application/json',
      'Authorization' : 'Bearer Tokenvalue'
      }
    };

    return this.http.get("http://localhost:64888/api/Users/SearchUsers?firstname=value&lastname=value&emailid=value&userid=value", httpOptions); 
  }

Thanks for response but I don't want to use the post request to get data. As it is working in postman and .net code then definitely it should work in Angular as well, I believe. — Anrorathod, Feb 08 '20 at 14:12

score 0 · Answer 2 · answered Feb 08 '20 at 19:17

Try the below code and replace with your code in UserService

export class UserService {

  constructor(private http: HttpClient) { }

  SearchUsers(requestParam : UserRequest) : Observable<any>{  

    const httpOptions = {
      headers: { 
      'Content-Type': 'application/json',
      'Authorization' : 'Bearer Tokenvalue'
      },
    };

    return this.http.get("http://localhost:64888/api/Users/SearchUsers+"?firstname="+requestParam.firstname+"&lastname="+requestParam+"&emailid="+requestParam.emailid +"&usertype="+requestParam.usertype ", httpOptions); 
  }
}

praful jain, first please understand the question. – Anrorathod Feb 09 '20 at 03:55 — Anrorathod, Feb 09 '20 at 03:55

How to pass request model to get API on Angular 7/8?

2 Answers2