I have 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
Agencyforthiscontact
However, I still have issues with the asynchronous requests a> and my array of information about the agencies related to the contacts is not set correctly. How can I solve this? The only solution I found was in each row of the table send the id of the contact and go looking for the information of the agency gradually.
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ência</th>
<th>Informaçõ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>
<span
class="glyphicon glyphicon-pencil"></span>
</td>
</tr>
</tbody>
</table>
<br>
</div>