Angular ng-repeat asynchronous

Question

Angular ng-repeat asynchronous

Navigation

#1 by (0 votes)

0

I'm using Angular 1.6.10 to show the data of an API, as the search of the data is asynchronous, I believe ng-repeat is executed before the data is loaded:

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,escolasestaduaisefederaiscadastradas</h1><table><thead><tr><th>Nome</th></tr></thead><tbody><trng-repeat="row in control.data">
        <td>{{row.NOME}}</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

getDataPOA is a function that takes the data from the API (actually 3 and joins everything)

api angularjs async angular ng-repeat

asked by anonymous 19.05.2018 / 19:01

1 answer

How to assign the value of a variable in javascript, within php? How to generate random Firebase items within a FirebaseRecyclerAdapter - Android Studio

score 0 · Accepted Answer

Angular has its own implementation for consumption of APIs, $ 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;
      });
    };
  }
]);