2

Opa pessoal. Tenho uma página que recebe dados JSON de uma requisição Ajax de tanto em tanto tempo, neste formato:

{  
   "status":"success",
   "total":4,
   "0":{  
      "id_user":"11",
      "posicao":0,
      "nick":"Usuario",
      "premium":"0",
      "verificado":"1"
   },
   "1":{  
      "id_user":"10076",
      "posicao":1,
      "nick":"Usuario2",
      "premium":"0",
      "verificado":"0"
   },
   "2":{  
      "id_user":"10071",
      "posicao":2,
      "nick":"Usuario3",
      "premium":"1",
      "verificado":"1"
   },
   "3":{  
      "id_user":"10078",
      "posicao":3,
      "nick":"Usuario4",
      "premium":"0",
      "verificado":"0"
   }
}

E em minha página que recebe esses dados, eu tenho uma lista com 4 itens, Tais itens devem ser populados com os dados desta requisição ajax.

A lista está assim:

Acontece que o valor de usuários retornados no JSON não será sempre o mesmo, ou seja, as vezes, pode ser 3, as vezes 2, ou 4.

Logo, eu preciso que, quando for 4, o Jquery popule os 4 itens da lista. Quando for 3, o Jquery deve popular 3 itens da lista, e tornar o texto do último como "Aguardando jogador..." (como se voltasse ao estado original).

Eu tenho este código por enquanto:

var Verifica_Squad = function(TempoRequest) {
  Interval = setInterval(function() {
    $.ajax({
      url: 'getSquad.php',
      dataType: 'JSON',
      type: 'POST',
      success: function(data) {
        if (data.status === 'success') {
          for (var i = 0; i < data.total; i++) {
            $('#squad_players ul li[data-n_player=' + data[i]['posicao'] + ']').html(data[i]['nick']);
          }
        }
        if (data.status === 'nao_esta_em_squad') {
          $(location).attr('href', 'index');
        }
      },
      error: function(data) {
        TempoRequest = 5000;
        console.log(data);
        clearInterval(Verifica_Squad);
        Verifica_Squad(TempoRequest);

      }
    });

  }, TempoRequest);
}
<ul>
  <li data-n_player="0"><span>Aguardando jogador...</span></li>
  <li data-n_player="1"><span>Aguardando jogador...</span></li>
  <li data-n_player="2"><span>Aguardando jogador...</span></li>
  <li data-n_player="3"><span>Aguardando jogador...</span></li>
</ul>

Eu já consegui fazer popular a Lista, porém, caso um dado do JSON mude, como eu disse, a lista não volta ao estado original. Eu não faço a minima ideia de como fazer isso.

2 Respostas 2

3

Se o número de usuários for sempre 4, você pode iterar nessa quantidade e verificar se em cada iteração existe algum dado, senão você preenche com o padrão:

success: function(data) {
  if (data.status === 'success') {
    for (var i = 0; i < 4; i++) {
      if(data[i]['posicao'] !== undefined){
        $('#squad_players ul li[data-n_player=' + data[i]['posicao'] + ']').html(data[i]['nick']);
      }else{
        $('#squad_players ul li[data-n_player=' + data[i]['posicao'] + ']').html('Aguardando jogador...');
      }          
    }
  }
  if (data.status === 'nao_esta_em_squad') {
    $(location).attr('href', 'index');
  }
},
3

Você pode fazer o seguinte, coloque um id na tag <ul>, remova as tags <li> de dentro da tag <ul> e dentro do success do seu ajax, monte essas tags direto no javascript.

ou seja, ao invés de:

$('#squad_players ul li[data-n_player=' + data[i]['posicao'] + ']').html(data[i]['nick']);

você teria algo como:

var ul = document.getElementById("id");
var li = document.createElement("li");
li.appendChild(document.createTextNode("TEXTO"));
li.setAttribute("id", "id");
ul.appendChild(li);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .