for each and http get with angular

Question

i am looking for a way to get a query during a foreach with angular. I have a table like this:

players = [
{
  id: 'af948a0a-66be-44b1-af85-7ccd1a289df0',
  pseudo: 'DocEo.AG',
  age: '31',
  twitch: '',
  youtube: false,
  facebook: false,
  twitter: '',
  stats: [],

}];

I would like at the foreach, get the stats via the id of the person and push in my table, but for the moment without success. Here is my code for the moment that does not work.

ngOnInit() {
    this.players = this.teamService.players;

    this.statUser();  
}

statUser() {
    this.players.forEach(function(element) {
        console.log(element.id);
        this.getStats('element.id');
    });
}

getStats(idUser) {
    this.http.get(this.urlIdTest + idUser).subscribe((data) => {
        this.getStat = data;
    });
}

EDIT: I have a new problem, everything works fine but I have this error message in the console:http://prntscr.com/p2kvu8 My array: http://prntscr.com/p2kwpf

Why are you passing the string 'element.id' to getStats()? How about passing element instead (i.e. the user object), get the stats for that user, and update the user with the stats you obtained? — JB Nizet
– JB Nizet, Commented Aug 30, 2019 at 13:29
That's what I want to do, but I can not find the right syntax or the right way to do it ... Because if I try this.getStats (element.id); it does not work — Eolynas
– Eolynas, Commented Aug 30, 2019 at 13:34
Again, what you should pass is element, not element.id. You want to pass the user object, not its ID. — JB Nizet
– JB Nizet, Commented Aug 30, 2019 at 13:37
Do not do this. Making multiple http calls like this will not be good for your application's performance. Instead maybe modify your API to accept a a string of ids separated by a , or ; as your query params and use join(",") or join(";") to join the ids before you send the request. — nash11
– nash11, Commented Aug 30, 2019 at 13:41

Anshuman Jaiswal · Accepted Answer · 2019-08-30 13:33:05Z

1

You are passing id as 'element.id' (string) modify code like:

...
statUser() {
    this.players.forEach(function(element) {
        console.log(element.id);
        this.getStats(element.id);
    });
}
...

Update 1

You can optimize your code by passing complete object and then assign stats in it.

statUser() {
    this.players.forEach((player) => {
        this.getStats(player);
    });
}

getStats(player) {
    this.http.get(this.urlIdTest + player.id).subscribe((data) => {
        player.stats = data;
    });
}

answered Aug 30, 2019 at 13:33

Anshuman Jaiswal

5,4621 gold badge31 silver badges46 bronze badges

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

3 Comments

Anshuman Jaiswal Over a year ago

@Eolynas yes that's why I updated my answer you can send complete object and assign stats in it in subscriber.

Eolynas Over a year ago

Perfect it works .... I just had a problem with the synthaxe .... thank you very much EDIT: What is the difference between: this.players.forEach(function(element) { this.getStats(element.id); }); and statUser() { this.players.forEach((player) => { this.getStats(player); }); }

MoxxiManagarm Over a year ago

"thank you, on the other hand this.getStat does not return anything" reason within my answer

MoxxiManagarm · Accepted Answer · 2019-09-02 06:44:47Z

0

Just a little side note, please avoid vanilla functions within Angular Components. Always use Arrow-functions. Vanilla functions change the scope of this

this.players.forEach(function(element) {
        console.log(element.id);
        this.getStats('element.id'); // the this here
    });

this.players.forEach(element => {
        console.log(element.id);
        this.getStats('element.id'); // is not the same here
    });

edited Sep 2, 2019 at 6:44

answered Aug 30, 2019 at 13:46

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

2 Comments

Heretic Monkey Over a year ago

I think you mean arrow functions, not Array-functions :). And really, this should be a comment...

MoxxiManagarm Over a year ago

Yeah thanks of course I mean arrow functions ;-) edited

Collectives™ on Stack Overflow

for each and http get with angular

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related