Estou usando o Angular 1.6.10 para mostrar os dados de uma API, como a busca dos dados é assíncrona, acredito que o ng-repeat é executado antes dos dados serem carregados:
angular
.module('appDataPOA', [])
.controller('controllerDataPOA', async function() {
this.data = await getDataPOA();
console.log(this.data); //Retorna o array de objetos corretamente
});
async function getDataPOA() {
if (navigator.onLine) {
let json = [];
for (let resource of ['c003f659-dc05-4e64-8a5a-0f730ac8cff2', 'c2da9ff7-94c8-43af-8141-d03f8d325739', '9b019d7c-1956-4cf8-bc75-9041284d5d81']) {
json = json.concat(
await fetch(`http://datapoa.com.br/api/action/datastore_search?resource_id=${resource}&limit=500`)
.then(data => data.json())
.then(dataJSON => dataJSON.result.records)
.catch(error => error)
);
}
localStorage.dataPOA = JSON.stringify(json);
return json;
} else if (localStorage.dataPOA) {
return JSON.parse(localStorage.dataPOA);
} else {
return null;
}
}
<html lang="pt-BR" ng-app="appDataPOA">
<body ng-controller="controllerDataPOA as control">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<h1>{{control.data.length}} universidades, faculdades, escolas estaduais e federais cadastradas</h1>
<table>
<thead>
<tr>
<th>Nome</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in control.data">
<td>{{row.NOME}}</td>
</tr>
</tbody>
</table>
</body>
</html>
getDataPOA
é uma função que pega os dados da API (na verdade de 3 e junta tudo)
acredito que o ng-repeat é executado antes dos dados serem carregados
Isso é incorreto. o ng-repeat é executado durante todo o tempo de vida da página. Uma pergunta, depois das requisições nas APIs, você fez umconsole.log()
pra se certificar que os dados realmente foram capturados? Pode ser que eles não foram capturados, assim não tem nada para mostrar.console.log()
apenas após a chamada da função, eu pensei em colocar eles em cadathen
do seu código, para ter certeza que está tudo correto.