.map & .slice a unique value from data set

Question

I have a big list of player info. I am pulling the players onto the front end. I have managed to map them and slice them to bring back the first 11 players. Please see below code for this. I now only want to bring back the players from a unique position (value).

    render() {
        const { players } = this.props;
        const { primaryPositionNumber, image, fullName, playerId } = players;
        const playerPositions = this.props.players.slice(0, 11).map(function(player) {
            return (
                <Chip className="player" data-position={player.primaryPositionNumber}
                avatar={<Avatar alt={player.fullName} src={`${player.image}.png`}/>}
                label={player.fullName}
                key={player.playerId}
            />
            );
        });

        return 

        <div>       
            {playerPositions}
       </div>
}

I want to bring back a maximum of 11 players but only have one player from each {player.primaryPositionNumber} value. I will therefore end up with 11 players all in a different position. I am using es6, lodash and react if these can be useful here?

Answer 1

const players = [
  {
    number: 1,
    name: 'Timmy'
  },
  {
    number: 2,
    name: 'Bob'
  },
  {
    number: 2,
    name: 'Rob'
  },
  {
    number: 1,
    name: 'Ryan'
  }
];

const playerNumbers = [1,2];

const filteredPlayers = playerNumbers.map(n => players.find(f => n === f.number));
console.log(filteredPlayers);

As an example, I assume you just need to filter the players by the playerNumbers. players.find will return the first encountered.