Databases
StackOverflow2013
Postsdbo
POHow do I retrieve data using an AngularJS factory?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I retrieve data using an AngularJS factory?
    primarykey
    data
    text
    <p>I am having a problem displaying product information from the database using an AngularJS factory. Basically its a shopping cart application that I modified to display the products from the database instead of a hard coded array.</p> <p>Heres the main application file source code (app.js) :</p> <pre><code>'use strict'; var shop = angular.module('shop', []); // create a data service that provides a store and a shopping cart that // will be shared by all views (instead of creating fresh ones for each view) shop.factory("DataService",['$http', function($http) { // create store var myStore = new store($http); // return data object with store and cart return { store: myStore //cart: myCart ignore for now } }]); // adding the config on the module shop.config(function($routeProvider) { $routeProvider // angular object, injected dynamically .when('/', // we show the store on the root { controller: 'StoreController', templateUrl: 'partials/store.htm' }) .when('/cart', { controller: 'CartController', templateUrl: 'partials/cart.htm' }) .when('/checkout', { controller: 'CheckoutController', templateUrl: 'partials/checkout.htm' }) .when('/invoice', { controller: 'InvoiceController', templateUrl: 'partials/invoice.htm' }) .otherwise({ redirectTo: '/' }); // store }); var controllers = {}; controllers.StoreController = function($scope, $routeParams, DataService) { $scope.store = DataService.store; console.log($scope.store); //$scope.cart = DataService.cart; } </code></pre> <p>The store source code (store.js) where I retrieve the data :</p> <pre><code>function store($http) { this.products = []; this.url = 'php/db.php'; this.fields = [ 'product_id', 'product_name', 'product_description', 'product_price' ]; this.products = this.getProducts($http); } store.prototype.getProducts = function($http) { $http.post(this.url, { "action" : 'products', "fields" : this.fields }) .success(function(data, status) { //$scope.result = data; // Show result from server in our &lt;pre&gt;&lt;/pre&gt; element //return data; this.products = data; }) .error(function(data, status) { //return data || "Request failed"; //this.status = status; this.products = []; }); } store.prototype.getProduct = function (sku) { for (var i = 0; i &lt; this.products.length; i++) { if (this.products[i].sku == sku) return this.products[i]; } return null; } </code></pre> <p>Can anybody tell me what am I doing wrong here?</p> <ul> <li>Why cant I set my this.product variable to the database result?</li> <li>I would also like to extend the products class with more functions to save items to the database, how would I go about doing that?</li> </ul> <p>Any advice much appreciated.</p> <p>Regards</p> <p><strong>UPDATE</strong></p> <p>I have added the app.js code below, I am having an issue with the controller (StoreController) when accessing the data from the store class (store.js). It still shows an empty array. I have changed my code as suggested by m.e.conroy.</p> <p>app.js</p> <pre><code>'use strict'; var shop = angular.module('shop', []); shop.factory("DataService",['$http', '$q', function($http, $q) { // create store var myStore = new store($http, $q); return { store: myStore } }]); // adding the config on the module shop.config(function($routeProvider) { $routeProvider // angular object, injected dynamically .when('/', // we show the store on the root { controller: 'StoreController', templateUrl: 'partials/store.htm' }) .when('/cart', { controller: 'CartController', templateUrl: 'partials/cart.htm' }) .when('/checkout', { controller: 'CheckoutController', templateUrl: 'partials/checkout.htm' }) .when('/invoice', { controller: 'InvoiceController', templateUrl: 'partials/invoice.htm' }) .otherwise({ redirectTo: '/' }); // store }); var controllers = {}; controllers.StoreController = function($scope, $http, $routeParams, DataService) { $scope.store = DataService.store; } shop.controller(controllers); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USQCar
    1. USQCar
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. CODataService.store return a promise, so you need to resolve to catch the value. And it seems that you store function doesn't return the result object... you need to return this object. Can you create a plunker example with this full store factory implementation?
      singulars
      1. POHow do I retrieve data using an AngularJS factory?
      1. USDeividi Cavarzan
    2. COLook this nice example of angularjs app https://github.com/andreev-artem/angular_experiments/tree/master/examples/architecture and here http://jsfiddle.net/u5gV2/ for simple memory cache.
      singulars
      1. POHow do I retrieve data using an AngularJS factory?
      1. USPeter Gerasimenko
    3. COthe data which is returned is undefined. in the code I set the this.products variable to that which is returned in the success handler.
      singulars
      1. POHow do I retrieve data using an AngularJS factory?
      1. USQCar
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload