A jQuery Get () inside another jQuery get ()

1

I need to execute a jQuery Get() inside another, but I can not do it at all, it simply ignores the second Get() without returning what I need (the username of the second get() ):

$.getJSON("https://api.mercadolibre.com/users/" + minha_id + "/order_blacklist?access_token=" + access_token, function(data){
	var employee_data ='';
	for (var i = 0; i < data.length; i++) {
		employee_data += '<tr>';
		$.getJSON("https://api.mercadolibre.com/users/" + data[i].user.id + "?access_token=" + access_token, function(valor){
			username = valor.nickname;
			employee_data += "<td>" + username + "</td>";
		});
		employee_data += '<td>' + data[i].user.id + '</td>';
		employee_data += '<td>' + data[i].user.blocked + '</td>';
		employee_data += '</tr>';
		$('#employeed_table').append(employee_data);
	}
});
    
asked by anonymous 11.05.2018 / 16:01

2 answers

1

When performing an asynchronous request you should wait for a response. If you place a request within a for , including changing a variable (such as username = valor.nickname; ), the values will be scrambled and will not work the way you want.

You can solve this by doing a looping request , using a pointer and calling a loop function:

$.getJSON("https://api.mercadolibre.com/users/", function(data) {
   
   // cria um "for assíncrono", passando o ponteiro inicial '0', a variável 'data' e um 'callback'
   forAsync(0, data, function(employee_data){
    
    // após a função executar todas as requisições, será retornada a variável employee_data
    $('#employeed_table').append(employee_data);
    
   });
   
}); 

function forAsync(i, data, callback, employee_data = null) {
  
  if(employee_data == null) {
    employee_data = '';
  }
  
  if(data.length > 0) {
    
    employee_data += '<tr>';
    
    $.getJSON("https://api.mercadolibre.com/users/" + data[i].user.id + "?access_token=" + access_token, function(valor){
			
      var username = valor.nickname;
      
      employee_data += "<td>" + username + "</td>";
      employee_data += '<td>' + data[i].user.id + '</td>';
      employee_data += '<td>' + data[i].user.blocked + '</td>';
      employee_data += '</tr>';
      
      i++;
      
      if(i < data.length) {
        forAsync(i, data, callback, employee_data);
      }
      else {
        callback(employee_data);
      }
      
		});
    
  }
  else {
    callback(employee_data);
  }
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Maybe it's not the best way to fix the problem, and there are probably better methods, but you'll have to revise your code and perform it for that.

    
11.05.2018 / 16:37
0

Friend uses ajax that is simpler:

$.ajax({
    type: "GET",
    url: api.mercadolibre.com/users/" + minha_id +"/order_blacklist?access_token=" + access_token,
    success: (response) => {
        $.ajax({
            type: "GET",
            url: api.mercadolibre.com/users/" + minha_id +"/order_blacklist?access_token=" + access_token,
            async: false,
            success: (response) => {    

            },
            error: (response) => {
              console.log('Sem sucesso');
            }
        });
    },
    error: (response) => {
      console.log('Sem sucesso');
    }
});

When you receive the return of the first GET, you make another GET

    
11.05.2018 / 16:15