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, Sep 26 '15 at 23:50
Apologies, it was an old version. (Amended) The issue is still the same. — HGB, Sep 26 '15 at 23:55

Raj Karri · Accepted Answer · 2015-09-27T04:43:05.763

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/

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, Sep 27 '15 at 08:58
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) ... — HGB, Sep 27 '15 at 09:02

Rethabile · Answer 2 · 2015-09-27T00:17:59.687

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 '15 at 00:17

answered Sep 27 '15 at 00:04

Rethabile

325
3
22

I made the amends but I am getting Error: [ng:areq] Argument 'MainCtrl' is not a function, got undefined – HGB Sep 27 '15 at 00:25
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" – HGB Sep 27 '15 at 00:36
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. – Rethabile Sep 27 '15 at 01:34

score 0 · Answer 3 · answered Sep 27 '15 at 00:00

0

Try this:

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

answered Sep 27 '15 at 00:00

Ibrahimovic

13
6

HI Ibrahimovic, this still does not work. The data is simply not being found. – HGB Sep 27 '15 at 00:42

JSON object as angularjs factory

EDIT

3 Answers3