JSON object as angularjs factory

Question

I have a local object which I am trying to turn into a factory so it can be used by my main controller:

//factory
app.factory('items', function($http) {
        var items= {}; // define factory object
    var items = $http.get('pathtojson/data.json').success(function(response) {
        return response.data;
    });
    return items; // returning factory to make it ready to be pulled by the controller

});

Inside the Controller (Mainctrl):

<div class="container" ng-repeat="item in items.data"  ...

However, nothing happens. I tested it first by pasting the json as an array directly into the factory so I had:

app.factory("items", function () {
    var items = {};
    items.data = [{name: "value"}, {name: "value1"}etc. }];
    return items;
});

The above worked fine. I am using this thread as a reference but cannot get it to work. What am I doing wrong?

================

EDIT

var app = angular.module('app', []);

//factory
app.factory('itemsFactory', function($http) {

  return {
      getItems: function () {
         return  $http.get('pathtojson/data.json');
      }
}


});

//controller
app.controller('MainCtrl', function($scope, itemsFactory){
  itemsFactory.getItems().then(function(response){
              $scope.items = response;
        });

});

In your first code example you return factory, but in your second you return items. How does items relate to factory in your first code example? — Matt Way
– Matt Way, Commented Sep 26, 2015 at 23:50
Apologies, it was an old version. (Amended) The issue is still the same. — HGB
– HGB, Commented Sep 26, 2015 at 23:55

Raj Karri · Accepted Answer · 2015-09-27 04:43:05Z

3

There are few issues in the code. I took github API as an example and same thing will work with your example (data.json data).

Factory service code should be like this. There should be an object and for that object properties/methods can be hooked and same object need to be returned. Here in this example, getItems() method was hooked.
```
 app.factory('itemsFactory', function($http) {
   var factory = {};

   factory.getItems = function () {
    return  $http.get('https://api.github.com/users/angular/repos');  
   };

   return factory;
});
```
There are two ways to write controller here. One is with success() method and another one is with then() method. There is difference in the usage of these two methods. success() method deals with "data" and then() method deals with "response". When we deal with then() method we should consider "response.data" to get actual data. "response" object has other information along with "data". Here are the two ways of usage.

// 1.success() method.
```
 app.controller('MainCtrl', function($scope, itemsFactory){

 itemsFactory.getItems().success(function(data){
          $scope.items = data;
      });
 });
```
// 2.then() method
```
app.controller('MainCtrl', function($scope, itemsFactory){
itemsFactory.getItems().then(function(response){
         $scope.items = response.data;
    });
});
```

Live Demo on JSFiddle: http://jsfiddle.net/rajkarri/hejr5e8o/1/

edited Sep 27, 2015 at 4:43

answered Sep 27, 2015 at 4:37

Raj Karri

5514 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HGB Over a year ago

That is a fantastic response Rethabile, just implementing it now. Can the same console.log(response) suggested by Rethabile below work for the $scope.items (currently I get items undefined) as I want to understand what the differences between the response and data is.

HGB Over a year ago

Also, in order to access my JSON data via another function would I have to go something along the lines of : app.getSelectedRating = function (rating) { $scope.rating = 0; $scope.ratings = ItemsFactory.response.data(model.rating) ...

Rethabile · Accepted Answer · 2015-09-27 00:17:59Z

1

you need to inject "itemsFactory" into your controller and also wrap your factory in a function so it should look something like this:

app.factory('itemsFactory', function($http) {
return {
    getItems: function () {
       return  $http.get('pathtojson/data.json');
    }
}

 app.controller("Mainctrl", function(itemsFactory, $scope){

         itemsFactory.getItems().then(function(response){
               $scope.items = response;
         });
 });

edited Sep 27, 2015 at 0:17

answered Sep 27, 2015 at 0:04

Rethabile

3353 silver badges23 bronze badges

3 Comments

HGB Over a year ago

I made the amends but I am getting Error: [ng:areq] Argument 'MainCtrl' is not a function, got undefined

HGB Over a year ago

I amended again. See above under EDIT. They were syntax errors above app.conroller. However, now there are no errors and no data. The page is just "silent"

Rethabile Over a year ago

Put a "console.log(response) "above the $scope.items in your controller and in the browser go to the developers tab and tell me what it says under console.

Ibrahimovic · Accepted Answer · 2015-09-27 00:00:27Z

0

Try this:

<div class="container" ng-repeat="item in items" ..

answered Sep 27, 2015 at 0:00

Ibrahimovic

136 bronze badges

1 Comment

HGB Over a year ago

HI Ibrahimovic, this still does not work. The data is simply not being found.

Collectives™ on Stack Overflow

JSON object as angularjs factory

EDIT

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related