CODEWITHSUNDEEP
angular
Abhinay
Abhinay

Reputation: 183

Angular http Get API string params for mat table

I have an on click event. Which routes to a new component B. As part of component B it would create a mat table to fetch data, this table invoke a API service based on the click button. But i could not get any information back .. since i am passing APP[Object object] to the API instead of TOM. Below are my components and service code. Can someone help to resolve this please.

My params should at end of the URL as APP=TOM or APP=CAT. My Base URL is still

Click event component.ts:

    export class AppCardsComponent  {
 public app:String;  
  constructor(private route: Router) { }
  onCardClick(app:string) {
    this.app = app;
    this.route.navigateByUrl('/app');}

routed component and table calling the get api component.

export class ServerDataComponent implements OnInit {
  [x: string]: any;
  displayedColumns: string[] = ['Environment', 'App_server', 'App_user', 'App_password', 'DB_Server','DB_user','DB_password','URL'];
  serversource;
  server;
  servers: Server[];

  constructor(private Serverdata:serverdata,public dialog: MatDialog){}

  ngOnInit() {
    this.Serverdata.getservers("")
    .subscribe((servers: Server[]) => {
      this.servers = servers;
      console.log(this.servers);
      console.log(JSON.stringify(this.servers));

     this.serversource = new MatTableDataSource(servers);
    });

Service.api:

export class serverdata {

  baseURL="https://xxxxxx.execute-api.ap-northeast-1.amazonaws.com/Test/application?App="
  constructor(private http: HttpClient) {
  }
  getservers(app) {
      let params = new HttpParams().set('APP',app)
      console.log(params.toString());
    return this.http.get(this.baseURL + {params});
  }

Upvotes: 0

Views: 404

Answers (2)

JMP
JMP

Reputation: 1934

Add parameters for the request like:

const params = new HttpParams()
.set('APP', app);

return this.httpClient.get(this.baseURL,{params});

You are currently concatenating params object to URL string which will be why you are passing APP[Object object].

Also your url should not now have ‘?app=‘ as the params will be added as above.

But as noted in the comments, you are sending empty string for function argument:

this.Serverdata.getservers("")

To have the value available for the parameter, you can declare the ‘add’ variable (public app:String) in your Serverdata service instead then inject the service into click handler component constructor also so you can set it like:

this.Serverdata.add = add;

It can then be read at service http call like this.app.

Or as noted in other answer, app value could be sent with route.

Upvotes: 1

Sarjerao Ghadage
Sarjerao Ghadage

Reputation: 1544

If you want to pass params from component A to B then you need to pass while routing from A to B & component B should be received that passed Param values.

 export class AppCardsComponent  {
 public app:String;  
  constructor(private route: Router) { }
  onCardClick(app:string) {
        this.app = app;
     this._route.navigate(['/app' + app]);
}

here this._route.navigate(['/app' + app]); app is router parameters send from compoent A to B. now component B shoud be receive whahtever parameter sent by A.using 

ngOnInit() {
    // get URL parameters
    this.route.params.subscribe(params => {
      this.values= params.app; // --> Name must match wanted parameter
    });
}

then you can pass received params to your method.

    export class ServerDataComponent implements OnInit {
      [x: string]: any;
      displayedColumns: string[] = ['Environment', 'App_server', 'App_user', 'App_password', 'DB_Server','DB_user','DB_password','URL'];
      serversource;
      server;
      servers: Server[];
     private values:any;

      constructor(private Serverdata:serverdata,public dialog: MatDialog){}

      ngOnInit() {
       this.route.params.subscribe(params => {
          this.values= params.app; // --> Name must match wanted parameter
        });
        this.getData();
       }

getData(){
 this.Serverdata.getservers(this.values)
        .subscribe((servers: Server[]) => {
          this.servers = servers;
          console.log(this.servers);
          console.log(JSON.stringify(this.servers));

         this.serversource = new MatTableDataSource(servers);
        });
}
}

Upvotes: 1

Related Questions