Ionic tabs with dynamic lists

Question

I create an ionic project with tabs that displays dynamic list using this code in services.js:

.factory('Interventions', function($http) {
   var interventions = {};
   $http({
     method: 'POST',
     url: 'http://172.20.1.1/list.php'
   }).success(function(data, status, headers, config) {
     interventions = data;
   });
   return {
     all: function() {
       return interventions;
     },
     get: function(iid) {
       return interventions[iid];
   }}
})

The problem is that my application didn't display the list at first when I load the page but only when i refresh it (with doRefresh) or when i go to other tab and back to the first one. Is there a solution to fix that ?

Thank you in advance

My code i ncontroller.js:

.controller('InterventionCtrl', function($scope, $http, Interventions) {
$scope.interventions = Interventions.all();

$scope.doRefresh = function() {
    $http.get('http://172.20.1.1/list.php')
    .success(function(newItems) {
        $scope.interventions = newItems;
    })
    .finally(function() {
        // Stop the ion-refresher from spinning
        $scope.$broadcast('scroll.refreshComplete');
    });
};
})
 .controller('InterventionDetailCtrl', function($scope, $stateParams, Interventions) {
   $scope.intervention = Interventions.get($stateParams.iid);
 });

and my view:

<ion-view title="Interventions">
      <ion-content>
        <ion-list>
          <ion-item ng-repeat="intervention in interventions" type="item-text-wrap" href="#/tab/interventions/{{intervention.ID}}">
            <h3>{{intervention.Nom}}</h3>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-view>

Can you show us your view and controller code? – Thierry Dec 18 '14 at 17:09 — Thierry, Dec 18 '14 at 17:09
I added my view and controller code. Thank you – Fares Omrani Dec 19 '14 at 07:49 — Fares Omrani, Dec 19 '14 at 07:49

score 0 · Answer 1 · edited May 23 '17 at 12:28

Interventions.all() makes an http request, which is asynchronous. You have no guaranties that data are available when you call all(). So all() can't return data. You have to pass a callback, something like that (not tested):

   var interventions = {};
   var doRequest = function(callback) {
     $http({
       method: 'POST',
       url: 'http://172.20.1.1/list.php'
     }).success(function(data, status, headers, config) {
       interventions = data;
       callback(data);
     });
   })
   return {
      all: function(callback) {
        if (interventions) {
          callback(interventions)
        } else {
          doRequest(callback)
        }
      },
      get: function(iid,callback) {
        if (interventions) {
          callback(interventions[iid])
        } else {
          doRequest(function(data){
             callback(data[iid])
          })
        }
      }
   }

And in you controller:

Interventions.all(function(interventions) {
  $scope.interventions = interventions;
}

Interventions.get(iid,function(intervention) {
  $scope.intervention = intervention;
}

You can find more informations about asynchronous here : How do I return the response from an asynchronous call?

Ionic tabs with dynamic lists

1 Answers1