0

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)

5
  • 1
    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 um console.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.
    – mutlei
    22/05/2018 às 12:40
  • Fiz está no código que postei, então qual é o problema?
    – Costamilam
    22/05/2018 às 14:29
  • Você fez um console.log() apenas após a chamada da função, eu pensei em colocar eles em cada then do seu código, para ter certeza que está tudo correto.
    – mutlei
    22/05/2018 às 14:32
  • Poderia explicar melhor? Nao entendi o por quê, o que vai adiantar?
    – Costamilam
    22/05/2018 às 14:33
  • Usando um console.log você pode ter uma ideia do que diabos está se passando na sequência de instruções que você tá passando pro javascript. Vamos dizer que pelo seu código devia estar funcionando, mas durante as requisições ele recebe um objeto nulo de resposta e ai a coisa começa a dar errado?
    – mutlei
    22/05/2018 às 14:41

1 Resposta 1

0

O Angular possui sua própria implementação para consumo de APIs, o $http:

angular.module('httpExample', [])
.controller('FetchController', ['$scope', '$http', '$templateCache',
  function($scope, $http, $templateCache) {
    $scope.method = 'GET';
    $scope.url = 'example.com';

    $scope.fetch = function() {
      $scope.code = null;
      $scope.response = null;

      $http({method: $scope.method, url: $scope.url, cache: $templateCache}).
        then(function(response) {
          $scope.status = response.status;
          $scope.data = response.data;
        }, function(response) {
          $scope.data = response.data || 'Request failed';
          $scope.status = response.status;
      });
    };
  }
]);

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 .