ionic/angular - get data from database - data loaded, but no output on site

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

Andrey · Accepted Answer · 2015-07-01 21:02:05Z

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>

i see a bit more, but still not working. i post an screenshot.

Bourbon · Accepted Answer · 2015-07-03 05:05:22Z

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 enter image description here

Ah, simple — there you return a data inside payload object. Just need to update a scope from $scope.pizzas = payload; to $scope.pizzas = payload.data;

Collectives™ on Stack Overflow

ionic/angular - get data from database - data loaded, but no output on site

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related