Manipulating data from Ajax

Question

Whoa, guys. I have a page that receives JSON data from an Ajax request from so long, in this format:

{  
   "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"
   }
}

And on my page that receives this data, I have a list with 4 items, Such items must be populated with the data of this ajax request.

The list goes like this:

It turns out that the value of users returned in JSON will not always be the same, ie sometimes it can be 3, sometimes 2, or 4.

Therefore, I need, when it is 4, Jquery populate the 4 items in the list. When it is 3, Jquery must populate 3 items from the list, and make the text of the latter as "Waiting for player..." (as if it were back to its original state).

I have this code for now:

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>

I’ve already been able to make the List popular, but in case a JSON data changes, as I said, the list does not go back to its original state. I have no idea how to do that.

Answer 1

If the number of users is always 4, you can iterate in that amount and check if in each iteration there is some data, otherwise you fill in the pattern:

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');
  }
},

Answer 2

You can do the following, put an id on the tag <ul>, remove the tags <li> from within the tag <ul> and within the success from your ajax, mount these tags right into javascript.

that is, instead of:

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

you would have something like:

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