2

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: inserir a descrição da imagem aqui

2
  • 2
    você está tentando usar o valor de vUsers para fazer um foreach antes de esperar a chamada async retornar. Seria interessante mover isso para uma function e chamar essa function no success do primeiro ajax, logo após setar a variável vUsers Commented 21/04/2020 às 16:57
  • 2
    o segundo problema é que, no código que usar o vUsers, tbm precisa do valor de vAlbuns, 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 usar Promise.all( que tem a mesma ideia, que incluse tem numa resposta abaixo Commented 21/04/2020 às 17:01

1 Resposta 1

4

Você pode usar o conceito de Promise para fazer isso. pode ler mais sobre isso aqui https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise

Para o seu caso em especifico mude sua requisição ajax para

Promise.all([
   $.ajax({
      url: 'https://jsonplaceholder.typicode.com/users',
      async: true,
   }),
   $.ajax({
      url: 'https://jsonplaceholder.typicode.com/photos',
      async: true,
   })
]).then(([vUsers, vAlbums]) => {
   // Coloque o código que edita sua tabela aqui
});

Promise vai aguardar o retorno das duas requisições assíncronas e então executara o que estiver entre o then

1
  • Muito obrigado Mauricio, funcionou perfeitamente, obrigado. Commented 21/04/2020 às 20:02

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 .