Select elements randomly from an array without repeating

Question

First of all, I searched several websites about this problem and found numerous examples, but unfortunately none of these examples worked in solving my problem.

Anyway, I’m developing a quiz based on the game CS:GO, where a photo will be shown and the user needs to match the position name for the photo (based on the game).
For this, I created an array that has objects, which in turn have the image and the name of the position that will be shown. Because of that I need those objects with those hints. are chosen randomly without repetition, until the array has no more options available.
I managed to get close to this goal through this code:

const maps = [
  {
    mapName: "dust ii",
    positions: [
      {
        posicao: "fundo",
        posicaoImg: "#",
      },
      {
        posicao: "escuro baixo",
        posicaoImg: "#",
      },
      {
        posicao: "base tr",
        posicaoImg: "#",
      },
      {
        posicao: "base ct",
        posicaoImg: "#",
      },
    ],
  },
  {
    mapName: "mirage",
    positions: [
      {
        posicao: "fundomirage",
        posicaoImg: "#",
      },
      {
        posicao: "escuro baixomirage",
        posicaoImg: "#",
      },
    ],
  },
];

let selectElementMap = document.getElementById("mapSelector");
let valueSelectedMap;
let positionAlreadyChosen = [];

function getSelectedValuesIndex() {
  valueSelectedMap =
    selectElementMap.options[selectElementMap.selectedIndex].value; // pegando o mapa através do "<select>" no html

  let positions = maps[valueSelectedMap].positions; // pega o array que contem o nome das posições e a imagem

  let randomArrayPos = Math.floor(
    Math.random() * maps[valueSelectedMap].positions.length
  );

  return (showPosition = positions[randomArrayPos].posicao); // pega uma posição aleatória do mapa
}

function basicLogic() {
  getSelectedValuesIndex();

  // verificar se a posição gerada já foi selecionada
  if (!positionAlreadyChosen.includes(showPosition)) { 
    positionAlreadyChosen.push(showPosition);
  }
  console.log(positionAlreadyChosen);
}

<div class="container">
  <main class="content">
    <div class="selects-area">
      <select name="mapSelector" id="mapSelector">
        <option value="" disabled selected>Selecione um mapa</option>
        <option value="0">Dust II</option>
        <option value="1">Mirage</option>
        <option value="2">Cache</option>
        <!-- <option value="...">___</option> -->
      </select>
    </div>

    <button class="play" onclick="basicLogic();">Jogar</button>
  </main>
</div>

So with this code I get the following result when I click to get the elements Random:

With everything explained, my doubt is the following: There is an easier way to do this process, without having to click 9x (as in the example) for all positions to be chosen?

Answer 1

Have you ever thought of just creating a copy of your array and sort randomly?

const desordenar = (arr) => {
  const copia = [...arr];

  for (let i = copia.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    [copia[i], copia[j]] = [copia[j], copia[i]];
  }
  
  return copia;
};

const desordenado = desordenar(['fundo', 'base tr', 'base ct']);
console.log(desordenado.shift()); // Pega o primeiro da lista
console.log(desordenado.shift()); // Pega o segundo da lista
console.log(desordenado.shift()); // Pega o terceiro da lista

---

The above function is based on the algorithm Fisher-Yates shuffle which consist of placing all elements in one array and, backwards, exchange its position with some random element.

---

In the case of your code the suggestion would be as follows:

const maps = [{
    mapName: "dust ii",
    positions: [{
        posicao: "fundo",
        posicaoImg: "#",
      },
      {
        posicao: "escuro baixo",
        posicaoImg: "#",
      },
      {
        posicao: "base tr",
        posicaoImg: "#",
      },
      {
        posicao: "base ct",
        posicaoImg: "#",
      },
    ],
  },
  {
    mapName: "mirage",
    positions: [{
        posicao: "fundomirage",
        posicaoImg: "#",
      },
      {
        posicao: "escuro baixomirage",
        posicaoImg: "#",
      },
    ],
  },
];

const desordenados = {};

let selectElementMap = document.getElementById("mapSelector");

const desordenar = (arr) => {
  const copia = [...arr];

  for (let i = copia.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [copia[i], copia[j]] = [copia[j], copia[i]];
  }

  return copia;
};

function basicLogic() {
  const valueSelectedMap = selectElementMap.options[selectElementMap.selectedIndex].value;
  const desordenado = desordenados[valueSelectedMap]?.length ? desordenados[valueSelectedMap] :  desordenar(maps[valueSelectedMap].positions); // o array que será randomizado com base no <select> do usuario
  desordenados[valueSelectedMap] = desordenado;
  console.log(desordenado.shift()); // Pega o primeiro da lista
}

<div class="container">
  <main class="content">
    <div class="selects-area">
      <select name="mapSelector" id="mapSelector">
        <option value="" disabled selected>Selecione um mapa</option>
        <option value="0">Dust II</option>
        <option value="1">Mirage</option>
        <option value="2">Cache</option>
        <!-- <option value="...">___</option> -->
      </select>
    </div>

    <button class="play" onclick="basicLogic();">Jogar</button>
  </main>
</div>

---

Reference: Shuffle an array.