How can I pass 2 variables in URL using Angular?

Question

I have an Angular app that uses a Python backend and a MongoDB. I am trying to get a single review through the URL that follows this:

http://localhost:5000/api/v1.0/players/' + id + '/reviews/' + rid

In my web.service.ts I have the following func:

getReview(id: any, rid: any) {
    return this.http.get('http://localhost:5000/api/v1.0/players/' + id + '/reviews/' + rid);
}

In my review.component.ts I have this:

ngOnInit() {
    this.player = this.webService.getPlayer(this.route.snapshot.params['id']);
    this.player_review = this.webService.getReview(this.route.snapshot.params['id'], this.route.snapshot.params['rid']);
}

this.player get all the player data and this.player_review is suppose to bring back a single review.

The this.player works fine but I get this error for this.player_review:

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Here is the URL: http://localhost:4200/players/6194f873570f9ac9f081763e/reviews/61cde0f8daa68a9b80b3f3ad

And here is a Postman screenshot of it working:

Why is this error happening?

can you show us the result of localhost:4200/players/6194f873570f9ac9f081763e/reviews/… using postman — DEV
– DEV, Commented Dec 31, 2021 at 10:15
The problem is in your template. You’re trying to do an ngFor on a single object. You need an itterable (like an array) to use ngFor. — MikeOne
– MikeOne, Commented Dec 31, 2021 at 10:27
Thank you @MikeOne ! My python code was returning: return make_response(jsonify(player['review'][0]), 200) so I changed it to: return make_response(jsonify([player['review'][0]]), 200) and It worked — RC07JNR
– RC07JNR, Commented Dec 31, 2021 at 16:37

DEV · Accepted Answer · 2021-12-31 10:37:49Z

1

The getReview method returns object instead of an array. and you are using an ngFor to iterate player_review when it's not an array. that's why you got this error.

check the structure of the received data, Probably the array you want to iterate is contained into an attribute of the returned value of this.webService.getReview

answered Dec 31, 2021 at 10:37

DEV

1,7562 gold badges9 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

How can I pass 2 variables in URL using Angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related