CODEWITHSUNDEEP
jsonangularjsfactory
HGB
HGB

Reputation: 2193

JSON object as angularjs factory

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;
        });

});

Upvotes: 0

Views: 4062

Answers (3)

Raj Karri
Raj Karri

Reputation: 551

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

  1. 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;
});

  2. 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/

Upvotes: 3

Rethabile
Rethabile

Reputation: 325

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;
         });
 });

Upvotes: 1

Ibrahimovic
Ibrahimovic

Reputation: 13

Try this:

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

Upvotes: 0

Related Questions