angular2, how to return object who have the max value of an attribute in an array of objects

Question

i'am working on an angular2 app , i have an array of objects and i want to return the object how has max value of an attribute (in my case the object how have more likes) how to do that in typescript

import {Player} from './player';
export const PlayersData : Player[] = [
{id:1,name:"Marc-andré Ter stegen",number:"1",post:"Goalkeeper",goals:0,assist:0,likes:10,dislike:0,img:"http://s.weltsport.net/bilder/spieler/gross/150720.jpg"},
{id:2,name:"Gerrad Piqué",number:"3",post:"Defender",goals:0,assist:0,likes:10,dislike:0,img:"http://s.weltsport.net/bilder/spieler/gross/27798.jpg"},
{id:3,name:"Ivan Rakitić",number:"4",post:"Midfielder",goals:0,assist:0,likes:7,dislike:0,img:"http://s.weltsport.net/bilder/spieler/gross/35308.jpg"},
{id:4,name:"Sergie Buskquets",number:"5",post:"Midfielder",goals:0,assist:0,likes:10,dislike:0,img:"http://s.weltsport.net/bilder/spieler/gross/124973.jpg"},
{id:5,name:"Denis Suarez",number:"6",post:"Midfielder",goals:20,assist:20,likes:10,dislike:0,img:"http://s.weltsport.net/bilder/spieler/gross/200516.jpg"},
{id:6,name:"Arda Turan",number:"7",post:"Midfielder",goals:0,assist:10,likes:10,dislike:0,img:"http://s.weltsport.net/bilder/spieler/gross/30203.jpg"},
{id:7,name:"Andres Iniesta",number:"8",post:"Midfielder",goals:10,assist:20,likes:0,dislike:0,img:"http://s.weltsport.net/bilder/spieler/gross/5057.jpg"},
{id:8,name:"Luis Suarez",number:"9",post:"Forward",goals:0,assist:0,likes:30,dislike:0,img:"http://s.weltsport.net/bilder/spieler/gross/43635.jpg"},
{id:9,name:"Lionel Messi",number:"10",post:"Forward",goals:0,assist:0,likes:40,dislike:0,img:"http://s.weltsport.net/bilder/spieler/gross/26622.jpg"},
{id:10,name:"Neymar Jr",number:"11",post:"Forward",goals:30,assist:10,likes:30,dislike:0,img:"http://s.weltsport.net/bilder/spieler/gross/142105.jpg"},
{id:11,name:"Javier Mascherano",number:"14",post:"Defender",goals:0,assist:0,likes:10,dislike:0,img:"http://s.weltsport.net/bilder/spieler/gross/22185.jpg"},
{id:12,name:"Jordi Alba",number:"18",post:"Defender",goals:0,assist:0,likes:10,dislike:0,img:"http://s.weltsport.net/bilder/spieler/gross/125417.jpg"},
{id:13,name:"Sergio Roberto",number:"20",post:"Midfielder",goals:0,assist:0,likes:20,dislike:0,img:"http://s.weltsport.net/bilder/spieler/gross/171905.jpg"},
{id:14,name:"Samuel Umtiti",number:"23",post:"Defender",goals:0,assist:0,likes:9,dislike:0,img:"http://s.weltsport.net/bilder/spieler/gross/170711.jpg"}

];

this is what i tried in typescript

export class DashboardComponent implements OnInit {
  players : Player[] = [];
 bestPlayer:Player;
  constructor(private playerService : PlayerService) { }
 max =0;
 bestPlayer = this.players[0];
  ngOnInit() {
   this.playerService.getPlayers()
   .then(players=> this.players = players);
   for (player of players)
      if (player.likes>max) {
        max => player.likes;
        bestPlayer => player;
      }
  }



}

The same way you would in javascript. What have you tried so far? — Igor, Jun 07 '17 at 17:27
Your `then` will not complete before the next line under the `getPlayers` call executes. Your `for` loop will always loop over an empty array. Move that all into the `then` statement. — Igor, Jun 07 '17 at 17:40
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Igor, Jun 07 '17 at 17:54

score 0 · Answer 1 · answered Jun 07 '17 at 17:58

As Igor comment, you should read duplicate topic first. I also give suggest for your other stuck, get object contain max value. Please read other topic for clear answer Finding the max value of an attribute in an array of objects

export class DashboardComponent implements OnInit {
  players : Player[] = [];
  bestPlayer:Player;

  constructor(private playerService : PlayerService) { }

  max =0;

  ngOnInit() {
    this.playerService.getPlayers()
    .then(players=> {
         this.players = players;
         let maxValue = Math.max.apply(Math,players.map(function(o){return o.likes;}));
         this.bestPlayer = players.filter(function(o) { return o.likes === maxValue; })[0];
     });    
  }
}

score 0 · Answer 2 · answered Jun 07 '17 at 18:27

I would suggest using Lodash. They have a maxBy function that parses an array of objects and returns the one with a max value by property.

Example from their site.

var objects = [{ 'n': 1 }, { 'n': 2 }];

_.maxBy(objects, function(o) { return o.n; });
// => { 'n': 2 }

// The `_.property` iteratee shorthand.
_.maxBy(objects, 'n');
// => { 'n': 2 }

score 0 · Answer 3 · answered Jun 07 '17 at 19:41

i found the solution :

bestPlayer:Player;
data:Player[];
max:number =0;
  constructor(private playerService : PlayerService) { }
  ngOnInit() { 
    this.data=this.playerService.getDatas();
    for (var i = 0; i <= this.data.length; i++) {
    if (this.data[i].likes>this.max) {
      this.max=this.data[i].likes;
      this.bestPlayer=this.data[i];
      
     } 
  }

angular2, how to return object who have the max value of an attribute in an array of objects

3 Answers3