Handling Ajax data

Question

Handling Ajax data

Navigation

#1 by (3 votes)
#2 by (3 votes)

2

Personal oops. I have a page that receives JSON data from an Ajax request from time to time 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 should be populated with data from this ajax request.

The list looks like this:

ItturnsoutthatthevalueofusersreturnedinJSONwillnotalwaysbethesame,thatis,sometimesitcanbe3,sometimes2,or4.

So,Ineedto,whenit's4,Jquerypopulatethe4itemsinthelist.Whenitis3,Jqueryshouldpopulate3itemsfromthelist,andmakethelasttextas"Waiting for player ..." (as if returning to the 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 managed to make the List popular, but if a JSON data changes, as I said, the list does not return to its original state. I have no idea how to do this.

javascript jquery ajax

asked by anonymous 19.08.2018 / 15:09

2 answers

How do I get the first character of a String and make it uppercase by storing it in a variable? How to get the last day of a month with MomentJS?

score 3 · Answer 1

If the number of users is always 4, you can iterate through this amount and check if there is any data in each iteration, otherwise you fill in the default:

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

score 3 · Answer 2

You can do the following, put an id in the <ul> tag, remove the <li> tags from within the <ul> tag and within the success of your ajax, mount these tags directly in javascript. p>

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);