Relate Ids to Javascript

Asked

Viewed 73 times

1

I need help with Java (I’m a beginner in programming). I have a list of registered firebase players and I need to connect each player with their respective race time. A player has an id= player1 and has a time with id= time1 and so on until player8/timeJourer8 and I need to list in order of time and for that I compare the value of each time, but the time and the player of that time have to appear. follows 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);
    });
  });
}
  • What about Javascript code? It’s like [Edit] the question and put it?

  • If you need more I command. This is what makes the data tabulation.

  • You can put what you give here console.log(snapshot); before the .forEach? So you want to sort that data before you produce HTML?

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.