.map & .slice уникальное значение из набора данных

Question

У меня большой список информации об игроке.Я тяну игроков на передний конец.Мне удалось нанести на карту их и нарезать, чтобы вернуть первых 11 игроков.Пожалуйста, смотрите ниже код для этого.Теперь я хочу вернуть игроков только с уникальной позиции (значения).

    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>
}

Я хочу вернуть максимум 11 игроков, но иметь только одного игрока из каждого значения {player.primaryPositionNumber}.Поэтому в итоге у меня будет 11 игроков на разных позициях.Я использую es6, lodash и реагирую, если они могут быть полезны здесь?

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);

В качестве примера, я предполагаю, что вам просто нужно отфильтровать игроков по playerNumbers.players.find вернет первый встреченный.