1
resposta

Como ordenar um ranking

Olá pessoal!

Tenho um ranking de gols marcados de um campeonato e gostaria de ordenar os times pelos gols marcados.

Esse é o código que montei:

<div id="ranking-content">

  <div id="ranking-item-wrapper">
    <div id="time">
      <span id="time-posicao">1</span>
      <span id="time-nome">Santos</span>
    </div>
    <span class="gols-marcados-santos">15</span>
  </div>

  <div id="ranking-item-wrapper">
    <div id="time">
      <span id="time-posicao">1</span>
      <span id="time-nome">Palmeiras</span>
    </div>
    <span class="gols-marcados-palmeiras">23</span>
  </div>

  <div id="ranking-item-wrapper">
    <div id="time">
      <span id="time-posicao">1</span>
      <span id="time-nome">São Paulo</span>
    </div>
    <span class="gols-marcados-sao-paulo">9</span>
  </div>

</div>
1 resposta

Bom dia Breno, tudo certo?

Parabéns por ter um projeto seu e utilizar os conceitos que você viu.

Primeiramente eu sugiro utilizar os dados em um formato que seja mais fácil de manipular no lado do JavaScript e depois inserir dinamicamente esses valores no HTML. Poderia ser algo do tipo um JSON assim:

Arquivo times.json:

{
    "times": [
        {
            "nome": "Palmeiras",
            "posicao": 1,
            "golsMarcados": 23
        },
        {
            "nome": "São Paulo",
            "posicao": 3,
            "golsMarcados": 9
        },
        {
            "nome": "Santos",
            "posicao": 2,
            "golsMarcados": 15
        }
    ]
}

E no arquivo contendo o script, você pode importar e utilizar estes dados:

Arquivo no mesmo diretório chamado test.js

const dados = require('./times.json')

Agora, para ordenar, podemos extrair o conteúdo do objeto times, que é um array contendo os diversos times:

let arrayDeDados = dados.times;

E para ordenar esses dados podemos utilizar o próprio método dos arrays que é o sort(). Este método significa ordenar e precisa receber uma função de comparação para poder definir qual será o atributo que dá a ordem para a nossa lista. Como você perguntou, eu utilizei a quantidade de gols para tal:

arrayDeDados.sort( (primeiro, segundo) => {
    return segundo.golsMarcados - primeiro.golsMarcados;
})

Essa função retorna a diferença entre os gols de 2 times. Se o resultado for positivo, o segundo time passado como parâmetro deve vir antes, se for negativo o primeiro time deve vir antes e se os times empataram tanto faz a ordem entre eles.

Aqui está o código completo de teste:

Arquivo test.js:

const dados = require('./times.json')

let arrayDeDados = dados.times;

console.log("Dados fora de ordem:");
console.log(arrayDeDados)

arrayDeDados.sort( (primeiro, segundo) => {
    return segundo.golsMarcados - primeiro.golsMarcados;
})

console.log("Dados ordenados por quantidade de gols")
console.log(arrayDeDados);

Caso tenha restado alguma dúvida: não se preocupe. Estamos produzindo a continuação da formação e em breve teremos cursos com conteúdos abordando exatamente as questões de ordenação, então é só ficar atento nas notificações da plataforma e na formação para quando estes cursos forem lançados.

Espero ter ajudado e bons estudos!