Ionic / angular - get data from database - loaded data but no way out to site
I am trying to execute a database query and I want to see the result on the site. The data was loaded successfully, but the output does not work. I just don't see anything in.
Here is my controller code:
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 is the code for 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 is 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 denial? Here is the console.log icon: picture
+3
source to share
2 answers
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 is a screenshot
0
source to share
The problem is that you are making a request from the controller to serve and didn’t wait to receive the data, so you get an empty object because you return instantly this.pizzas
. Instead, you need to wait for the request to complete and then add it to the 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
};
});
Services:
Note: Angular's $ 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 an ion counter to wait for data to be ready and / or ion update
<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>
+1
source to share