Error [object%20Object] passing data to URL - get method in Angular

Question

I'm doing my project in Angular 8 and face the problem with passing data using routerLink

here is my <tr> with routerLink

<tr *ngFor="let user of allData" [routerLink]="['client', user.clientId]">

ClientComponents and my idea for passing data

  public clientData: any = this.route.params.subscribe(params => {
        return params.clientId;
    });

then I'm passing that data to ClientService

    getMethodClientDetails(): void {
        this.clientsService.getClientsDetails(this.clientData)
            .subscribe(data => {
                    this.list = data;
                },
                error => this.errorMsg = error,
            );
    }

and my clientService function looks like:

  getClientsDetails(data): Observable<any> {
        return this.http.get<any>(URL + data)
            .catch(this.errorHandler);
    }

and this is my Request URL

/clients?clientId=[object%20Object]

instead of clientId I get an error. I don't know what's the issue, I'm passing just one value, not whole object

When I'm doing just console.log to check- everything looks correctly.

public clientData: any = this.route.params.subscribe(params => {
        console.log(params.clientId);
    });

output in console

Could someone help me solve that problem?

Try `console.log(this.clientData)` ,,,Are you actually returning the `params.clientId` or you are returning an `Observable` ? — Fahim Uddin, Apr 03 '20 at 13:25
Okay, just checked it returns an Observable. Why it doesn't return the data I wanted? Do you have some idea how to solve that? That's console.log result: Subscriber {closed: false, _parentOrParents: null, _subscriptions: Array(1), syncErrorValue: null, syncErrorThrown: false, …} — Jan, Apr 03 '20 at 13:37
well, you need to subscribe `this.clientData` again to get the value and store it somewhere and pass it to the `getMethodClientDetails()` before you use it. I don't have the data to test it as you do, so try it, atleast check the value of `params.clientId` still exists by console logging. — Fahim Uddin, Apr 03 '20 at 13:47
Yes, I solved my problem adding this: public clientID: any; public clientData: any = this.route.params.subscribe(params => { this.clientID= params.clientId; }); And it's working — Jan, Apr 03 '20 at 14:25

jeprubio · Answer 1 · 2020-04-03T13:52:38.857

The subscribe() method call returns a Subscription object that has an unsubscribe() method, which you call to stop receiving notifications.

What you define is a subscriber function that is executed when a consumer calls the subscribe() method.

What you can do is to create a property defined in your class as public clientData: any; and then assign that returned value inside the subscriber function:

this.route.params.subscribe(params => {
    this.clientData = params.clientId;
});

That's the reason why the console.log was ok, because it was placed inside the subscriber function.

Some subscriptions are just unsubscrived by angular itself but not all of them. It is considered a good practice to unsubscrive from all of them. I use subsink for this, it makes life easier.

Great! Thank you, it solved my problem! – Jan Apr 03 '20 at 14:22 — Jan, Apr 03 '20 at 14:22

Error [object%20Object] passing data to URL - get method in Angular

1 Answers1