Relate IDs with JavaScript

1

I need help with javaScript (I'm a beginner in programming). I have a list of players registered in the firebase and I need to connect each player with their respective time of proof. A player has id = player1 and has a time with id = timePlayer1 and so goes up to player8 / timePlayer8 and I need to list in order of time and for this I compare the value of each time, but it has to appear the time and the player of that time. follow the code I have here:

<form class="corrida" id="corrida">
                <h5 class="center">Nova Corrida</h5>
                <div class="row">
                    <div class="input-field col s6 offset-s3">
                    <input id="hora" type="text" class="validate black-text">
                    <label for="hora" class="black-text">Horário de partida</label>
                </div>
                    <div class="col s6">
                        <select class="list browser-default" id="corredor1">
                            <option title="option"></option>
                        </select>
                        <label class="black-text">Box 1</label>
                    </div>
                    <div class="input-field col s6">
                        <input id="TempoCorredor1" type="text" class="validate black-text">
                        <label for="TempoCorredor1" class="black-text">Tempo de prova (Segundos)</label>
                    </div>
                    <div class="col s6">
                        <select class="list browser-default" id="corredor2">
                            <option title="option"></option>
                        </select>
                        <label class="black-text">Box 2</label>
                    </div>
                    <div class="input-field col s6">
                        <input id="TempoCorredor2" type="text" class="validate black-text">
                        <label for="TempoCorredor2" class="black-text">Tempo de prova (Segundos)</label>
                    </div>
                    <div class="col s6">
                        <select class="list browser-default" id="corredor3">
                            <option title="option"></option>
                        </select>
                        <label class="black-text">Box 3</label>
                    </div>
                    <div class="input-field col s6">
                        <input id="TempoCorredor3" type="text" class="validate black-text">
                        <label for="TempoCorredor3" class="black-text">Tempo de prova (Segundos)</label>
                    </div>
                    <div class="col s6">
                        <select class="list browser-default" id="corredor4">
                            <option title="option"></option>
                        </select>
                        <label class="black-text">Box 4</label>
                    </div>
                    <div class="input-field col s6">
                        <input id="TempoCorredor4" type="text" class="validate black-text">
                        <label for="TempoCorredor4" class="black-text">Tempo de prova (Segundos)</label>
                    </div>
                    <div class="col s6">
                        <select class="list browser-default" id="corredor5">
                            <option title="option"></option>
                        </select>
                        <label class="black-text">Box 5</label>
                    </div>
                    <div class="input-field col s6">
                        <input id="TempoCorredor5" type="text" class="validate black-text">
                        <label for="TempoCorredor5" class="black-text">Tempo de prova (Segundos)</label>
                    </div>
                    <div class="col s6">
                        <select class="list browser-default" id="corredor6">
                            <option title="option"></option>
                        </select>
                        <label class="black-text">Box 6</label>
                    </div>
                    <div class="input-field col s6">
                        <input id="TempoCorredor6" type="text" class="validate black-text">
                        <label for="TempoCorredor6" class="black-text">Tempo de prova (Segundos)</label>
                    </div>
                    <div class="col s6">
                        <select class="list browser-default" id="corredor7">
                            <option title="option"></option>
                        </select>
                        <label class="black-text">Box 7</label>
                    </div>
                    <div class="input-field col s6">
                        <input id="TempoCorredor7" type="text" class="validate black-text">
                        <label for="TempoCorredor7" class="black-text">Tempo de prova (Segundos)</label>
                    </div>
                    <div class="col s6">
                        <select class="list browser-default" id="corredor8">
                            <option title="option"></option>
                        </select>
                        <label class="black-text">Box 8</label>
                    </div>
                    <div class="input-field col s6">
                        <input id="TempoCorredor8" type="text" class="validate black-text">
                        <label for="TempoCorredor8" class="black-text">Tempo de prova (Segundos)</label>
                    </div>
                </div>
                <div class="row">
                    <div class="col s12">
                        <select class="list browser-default" id="Juiz">
                            <option title="option"></option>
                        </select>
                        <label class="black-text">Juíz da Corrida</label>
                    </div>
                    <div class="input-field col s12">
                        <textarea id="Observacao" class="materialize-textarea"></textarea>
                        <label for="Observacao" class="black-text">Observações do Juíz</label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col s12 center">
                    <button class="btn waves-effect waves-light" type="submit">Enviar</button>
                </div>
            </div>
            <br>
        </form>


atletasList();

function atletasList() {
  var tbody = document.querySelector("#table-body");

  var rootRef = firebase.database().ref();

  rootRef.child('corredor').on('value', function (snapshot) {

    tbody.innerHTML = '';

    snapshot.forEach(function (item) {
      var linha = document.createElement('tr');
      var tdNome = document.createElement('td');
      var tdIdade = document.createElement('td');
      var tdTempo = document.createElement('td');
      var tdData = document.createElement('td');
      var ul = document.createElement('ul');
      var ulData = document.createElement('ul');

      tdNome.appendChild(document.createTextNode(item.val().nome));
      tdIdade.appendChild(document.createTextNode(item.val().idade));
      tdTempo.appendChild(document.createTextNode(item.val().tempo));
      tdData.appendChild(document.createTextNode(item.val().data));


      if (item.child('corredores').val()) {
        var chaves = Object.keys(item.child('corredores').val());
        console.log(chaves);
        for (var i = 0; i < chaves.length; i++) {
          rootRef.child('corredor/'+chaves[i]).once('value', function (snap) {
            var li = document.createElement('li');
            var liData = document.createElement('li');
            li.appendChild(document.createTextNode(snap.val().idade));
            liData.appendChild(document.createTextNode(snap.val().data));
            ul.appendChild(li);
            ulData.appendChild(liData);
          });
        }
      }
      tdTempo.appendChild(ul);
      tdData.appendChild(ulData)
      linha.appendChild(tdNome);
      linha.appendChild(tdIdade);
      linha.appendChild(tdTempo);
      linha.appendChild(tdData);
      tbody.appendChild(linha);
    });
  });
}
    
asked by anonymous 10.07.2017 / 03:39

0 answers