ionic/angular - get data from database - data load

Question

i try to do an database-request and want to see the output on site. The data is successfully loaded, but the output doesn't work. I just see nothing in the .

Here is the code of my controller:

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope) {})

.controller('TestCtrl', function($scope, pizzaService) {
  $scope.pizzas = pizzaService.all();
})

.controller('ChatsCtrl', function($scope, Chats) {
  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  }
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})


.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };

});

And here to code of my service:

angular.module('starter.services', [])
.factory('pizzaService', function($http) {
var pizzas = {};
  $http.get("http://localhost/whatever/www/php/load_Pizzas.php").success(function(data){
  this.pizzas = data;
  console.log('success - pizzas loaded');
  console.log(this.pizzas);
  });

  return {
    all: function() {
      return this.pizzas;
    }
  };
});

And here the code of the html-site:

<ion-view view-title="Pizzas">
<ion-content>
<label class="item item-input">
<input type="text" ng-model="search" placeholder="Suchtext">
</label>
<p ng-show="search">Du suchst gerade nach: {{search}}</p>
<ion-search placeholder="ion Suche" filter="search"></ion-search>
<ion-list>

<ion-item class="item-divider">Pizzas</ion-item>

<ion-item ng-repeat="pizza in pizzas.pizzas | filter:search" class="item-remove-animate item-icon-right">
<h2>{{pizza.name}}</h2>
<p>Preis: {{pizza.price}} Euro</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" >
Löschen
</ion-option-button>
</ion-item>

</ion-list>
</ion-content>
</ion-view>

What is the failure? Here a pictue of the console.log: picture

Answer 1

The problem is that you are make a request from controller to service and didn't wait until data will be fetched, so you are get empty object because instantly return this.pizzas. Instead need to wait until request to be finished and then append it to required scope.

Controller:

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope) {})

// Get promise and wait until data will be fetched, then push to scope.
.controller('TestCtrl', function($scope, pizzaService) {
  pizzaService.all().then(function(payload) {
     $scope.pizzas = payload;
  });

})

.controller('ChatsCtrl', function($scope, Chats) {
  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  }
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})


.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };

});

Service:

Note: Angular $http function is a promise, so you don't need to wrap it with deferred $q methods.

angular.module('starter.services', [])
.factory('pizzaService', function($http) {

  return {
    all: function() {
      // Return promise (async callback)
      return $http.get("http://localhost/whatever/www/php/load_Pizzas.php");
    }
  };
});

View:

Note: You can use ion-spinner to wait until data will be ready and / or ion-refresher

 <ion-view view-title="Pizzas">
    <ion-content>
    <label class="item item-input">
    <input type="text" ng-model="search" placeholder="Suchtext">
    </label>
    <p ng-show="search">Du suchst gerade nach: {{search}}</p>
    <ion-search placeholder="ion Suche" filter="search"></ion-search>
    <ion-list>

<ion-spinner ng-show="!pizzas" icon="spiral"></ion-spinner>

    <ion-item class="item-divider">Pizzas</ion-item>

    <ion-item ng-repeat="pizza in pizzas | filter:search" class="item-remove-animate item-icon-right">
    <h2>{{pizza.name}}</h2>
    <p>Preis: {{pizza.price}} Euro</p>
    <i class="icon ion-chevron-right icon-accessory"></i>
    <ion-option-button class="button-assertive" >
    Löschen
    </ion-option-button>
    </ion-item>

    </ion-list>
    </ion-content>
    </ion-view>

Answer 2

Controller.js

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope) {})

.controller('TestCtrl', function($scope, pizzaService) {
  pizzaService.all().then(function(payload) {
     $scope.pizzas = payload;
     console.log(payload);
  });
})

.controller('ChatsCtrl', function($scope, Chats) {
  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  }
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})

.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };

});

Service.js

    angular.module('starter.services', [])
    .factory('pizzaService', function($http) {

      return {
        all: function() {
          // Return promise (async callback)
          return $http.get("http://localhost/soundso/www/php/load_Pizzas.php");
        }
      };
    });

test html

<ion-view view-title="Pizzas">
  <ion-content>
    <label class="item item-input">
        <input type="text" ng-model="search" placeholder="Suchtext">
    </label>
    <p ng-show="search">Du suchst gerade nach: {{search}}</p>
    <ion-search placeholder="ion Suche" filter="search"></ion-search>
    <ion-list>

      <ion-spinner ng-show="!pizzas" icon="spiral"></ion-spinner>

      <ion-item class="item-divider">Pizzas</ion-item>

      <ion-item ng-repeat="pizza in pizzas | filter:search" class="item-remove-animate item-icon-right">
        <h2>{{pizza.name}}</h2>
        <p>Preis: {{pizza.price}} Euro</p>
        <i class="icon ion-chevron-right icon-accessory"></i>
        <ion-option-button class="button-assertive" >
          Löschen
        </ion-option-button>
      </ion-item>

    </ion-list>
  </ion-content>
</ion-view>

And here a screenshot