Array de Requests

Question

I own a list of contacts, each contact has its agency reference and I can only access the data of this agency by making a request. For each contact I have to access the agency to return the complete data.

Contact

Agency of that contact

However, I still have problems with asynchronous requests and my array of information about the agencies related to the contacts is not set correctly. How can I resolve this? The only solution I found was in each row of the table send the contact id and go searching for the agency information slowly.

Controller.js

var deferred = $q.defer();
  var contatos = "";
  var contatosArray = [];
  veiculosAPI.getVeiculo($routeParams.id).then(function (data) {
    var json = data.data;
    $scope.veiculoNome = json.nome;
    $scope.veiculoTipo = json.tipo;
    contatos = json._links.contatos;
    var agencias = json._links.agencias;
    return agenciasAPI.getAgenciasList(agencias.href);
  }).then(function (response){
    $scope.agencias = response.data._embedded.agencias;
    return contatosAPI.getContatosList(contatos.href);
  }).then(function (response){
    $scope.contatos = response.data._embedded.contatos;
    deferred.resolve(response);
  }).catch(function (error){
    alert("Erro ao obter informações de veículo" + '\t' + error + "\t" + JSON.stringify(error));
    deferred.reject(error);
  });

  //Buscar agências de contato 
   deferred.promise.then(function (resolve){
         try{
         contatosArray = resolve.data._embedded.contatos;
         var newArray = [];
         for(var i = 0; i < contatosArray.length; i++){
           contatosAPI.getAgencia(contatosArray[i]._links.agencia.href).then(function (data){
             var dadosAgencia = [{dadosAgencia: data.data}];
             newArray.push(dadosAgencia);
           }).catch(function (error){
             alert("Promise error.." + '\t' + error + '\t'+ JSON.stringify(error));
           });
        };
       }catch(error){
         alert(error + "\t" + JSON.stringify(error));
       }
       return resolve;
     }, function (reject){
         alert('Erro: ' + reject);
     });

Table

<div class="container">
    <h3>Contatos</h3>
    <table class="table table-hover">
      <thead>
        <tr>
          <th>Nome</th>
          <th>Ag&ecirc;ncia</th>
          <th>Informa&ccedil;&otilde;es</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="contato in contatos">
          <td>{{contato.nome}}</td>
          <td>{{contato.agencia.nome}}</td>
          <td>
            <span class="glyphicon glyphicon-trash"></span>
            &nbsp;
            <span
            class="glyphicon glyphicon-pencil"></span>
          </td>
        </tr>
      </tbody>
    </table>
    <br>
  </div>

Answer 1

Solution

I make all the requisitions I need only once with the $q.all, which returns me an array with the return of each some requests. To make this data accessible in HTML and not occur crashes, I created a new JSON which is independent of JSON contacts, in this new JSON know which agency that contact belongs by the index of the Array:

Controller.js

//Buscar agências de contato
  deferred.promise.then(function (resolve){
    contatosArray = resolve.data._embedded.contatos;
    var requestsAgencias = [];
    for(var i = 0; i < contatosArray.length; i++){
      requestsAgencias.push(contatosAPI.getAgencia(contatosArray[i]._links.agencia.href));
    }
    $q.all(requestsAgencias).then(function (values){
      $scope.dadosAgencia = values;
    }).catch(function (error){
      alert("Opsss!\n Não foi possível obter a agência do contato");
    });
    return resolve;
  }, function (reject){
    alert("Erro ao carregar informações do contato");
  });

HTML

<div class="container">
    <h3>Contatos</h3>
    <table class="table table-hover">
      <thead>
        <tr>
          <th>Nome</th>
          <th>Ag&ecirc;ncia</th>
          <th>Informa&ccedil;&otilde;es</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="contato in contatos">
          <td>{{contato.nome}}</td>
          <td>{{dadosAgencia[$index].data.nome}}</td>
          <td>
            <span class="glyphicon glyphicon-trash"></span>
            &nbsp;
            <span
            class="glyphicon glyphicon-pencil"></span>
          </td>
        </tr>
      </tbody>
    </table>
    <br>
  </div>