AngularJS service to load json file data into a service object

Question

I am fairly new to Angular and am trying to build a angular store app following a tutorial --> Link

The part I get confused are the services and the kind of data that is used. The structure of the code is as follows

app.js

(function(){
 var storeApp = angular.module('AngularStore', ['ngRoute']);

 storeApp.config(function($routeProvider) {
   $routeProvider
  .when('/store', {
    templateUrl: 'partials/store.html',
    controller: 'storeController'
  })
  .when('/products/:productSku', {
    templateUrl: 'partials/product.html',
    controller: 'storeController'
  })
  .when('/products1/:productId', {
    templateUrl: 'partials/product1.html',
    controller: 'storeController'
  })
  .when('/cart', {
    templateUrl: 'partials/shoppingCart.html',
    controller: 'storeController'
  })

   .otherwise({
    redirectTo: '/store'
  });
});

storeApp.controller('storeController', function($scope, $http,$routeParams, DataService) {

// get store and cart from service
$scope.store = DataService.store;
$scope.cart = DataService.cart;

// use routing to pick the selected product
if ($routeParams.productSku != null) {
    $scope.product = $scope.store.getProduct($routeParams.productSku);
}

if ($routeParams.productId != null) {
    $scope.product1 = $scope.store.getProduct1($routeParams.productId);
}

});


 /**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). **/

 storeApp.factory("DataService", function ($http) {

// create store
var myStore = new store();

// create shopping cart
var myCart = new shoppingCart("AngularStore");

// return data object with store and cart
return {
    store: myStore,
    cart: myCart
};
});

})();

Next There are two other file that have the data defined :

store.js

function store() {

 this.products1=[
new product1("1", "Grr", "Eat one every day to keep the doctor away!", 12, 90, 0, 2, 0, 1, 2),
new product1("2", "Grr2", "Guacamole anyone?", 16, 90, 0, 1, 1, 1, 2)
 ];

this.products = [
    new product("APL", "Apple", "Eat one every day to keep the doctor away!", 12, 90, 0, 2, 0, 1, 2),
    new product("AVC", "Avocado", "Guacamole anyone?", 16, 90, 0, 1, 1, 1, 2),
    new product("BAN", "Banana", "These are rich in Potassium and easy to peel.", 4, 120, 0, 2, 1, 2, 2)
];

}



 store.prototype.getProduct1 = function (id) {   
     for (var i = 0; i < this.products1.length; i++) {
         if (this.products1[i].id == id)
             return this.products1[i];
     }
     return null;
 }

store.prototype.getProduct = function (sku) {
for (var i = 0; i < this.products.length; i++) {
    if (this.products[i].sku == sku)
        return this.products[i];
}
return null;
}

product.js

 function product(sku, name, description, price, cal, carot, vitc, folate, potassium, fiber) {
this.sku = sku; // product code (SKU = stock keeping unit)
this.name = name;
this.description = description;
this.price = price;
this.cal = cal;
 }

 function product1(id, name, desc, price, color, type, category, photo) {
this.id = id; // product code (id = stock keeping unit)
this.name = name;
this.desc = desc;
this.price = price;
this.color = color;
this.type=type;
this.category=category;
this.photo=photo;
 }

Where I am getting stuck is if I decide to use a json file say something like this

$http.get('data/sample.json').success(function(data) {
  var mydata = JSON.parse(data);
   store.products1 = mydata;
   console.log(data);
 });

in my controller code and what I get on the console is Array[Object, Object....] with each object having values when I check in my dev tools on the browser. When I try to add the above code in my service function i.e the store.js I get http not defined How can I Change the code so that products1 holds the values from the json file

Possible duplicate of [AngularJS: factory $http.get JSON file](http://stackoverflow.com/questions/16930473/angularjs-factory-http-get-json-file) — hurricane, Dec 01 '16 at 07:58
@hurricane I did look at that one and did try what was suggested the problem I ran into was the store and product functions that are defined are these seperate objects and I am not very clear as to how or where I should be putting in the http.get call for the json file — Yaba, Dec 01 '16 at 08:13

hurricane · Answer 1 · 2016-12-01T08:39:13.700

-1

If you want to get your data with json folder don't use $http. $http works with service. You can do it with $resource.

var tempCall : $resource('data/sample.json');
var query = {};
tempCall.get(query,
    function(response){
        var mydata = JSON.parse(response);
        store.products1 = mydata;
        console.log(response);
    },
    function(error){

    }
);

edited Dec 01 '16 at 08:39

answered Dec 01 '16 at 08:19

hurricane

6,521
2
34
44

How would I be using this ? i am fairly new to angular so I don't get it... sorry – Yaba Dec 01 '16 at 08:37

AngularJS service to load json file data into a service object

1 Answers1