Estou com um problema de chamadas no AJAX, preciso realizar mais de uma chamada no AJAX para armazenar em variaveis diferentes e nisso poder trata-las.
Só que estou com problema no ASYNC do AJAX, pois está demorando a carregar as informações das APIs que chamo.
Já tentei de tudo até colocar uma chamada AJAX dentro de outra, mas não está correto isso e também não funcionou pois ao sair do segundo success da segunda chamada o valor da variavel se perde.
Alguém poderia me ajudar como fazer isso de outra forma?
Meu código abaixo:
<script type="text/javascript">
var vUsers;
var vAlbums;
var length;
$(document).ready(function() {
$.ajax({ url: 'https://jsonplaceholder.typicode.com/users',
async: true,
success: function(data1) {
vUsers = data1;
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError);
return false;
}
});
$.ajax({url: 'https://jsonplaceholder.typicode.com/photos',
async: true,
success: function(data2) {
vAlbums = data2;
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError);
return false;
}
});
var table = document.getElementById('table');
function contaAlbums(lineId) {
length = 0;
vAlbums.forEach(function(album) {
if (album.userId == lineId) { alert(lineId + ' ' + album.userId);
length++;
}
});
return length;
};
vUsers.forEach((line) => {
var lineId = line.id;
var tr = document.createElement('tr');
var username = document.createElement('td');
var name = document.createElement('td');
var email = document.createElement('td');
var city = document.createElement('td');
var tdAlbums = document.createElement('td');
alert(lineId);
var albumCount = contaAlbums(lineId);
username.innerText = line.username;
name.innerText = line.name;
email.innerText = line.email;
city.innerText = line.address.city;
tdAlbums.innerText = albumCount;
tr.append(username, name, email, city, tdAlbums);
table.append(tr);
});
});
</script>
Preciso pegar diversas informações para poder apresentar em uma table conforme imagem abaixo:
vUsers
para fazer um foreach antes de esperar a chamada async retornar. Seria interessante mover isso para uma function e chamar essa function nosuccess
do primeiro ajax, logo após setar a variávelvUsers
vUsers
, tbm precisa do valor devAlbuns
, que é outra promise de outra chamada async, ou seja, precisa que esse código seja executado quando retornar ambas as chamadas. Pra isso pode usar o$.when(
, que recebe uma lista de promises (teria de por ambas chamadas ajax numa function) ou tbm usarPromise.all(
que tem a mesma ideia, que incluse tem numa resposta abaixo