AngularJS: read JSON array from file into a Factory for use in ng-repeat

Question

I would like to read an array in from a JSON file and place it into a Factory so it can be used as a service, then use the service to populate an ng-repeat. This would all happen when the page loaded.

HTML:

<div ng-app="pageApp" ng-controller="productStreamCtrl">
    <div ng-repeat="product in products">
        <div>
            {{product.title}}
        </div>
        <div>
            {{product.descr}}
        </div>
    </div>
</div>

JS (from this question):

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

pageApp.controller('productStreamCtrl', function($scope, ProductStreamService) {
    $scope.products = ProductStreamService.obj.products; //Not sure how to call my array?
});

pageApp.factory('ProductStreamService', function($http) { 

    var obj = {products:null};

    $http.get('products.json').then(function(data) {
        obj.products = data;
    });  

    return obj;
});

JSON:

[{
    "title" : "Title 1",
    "descr" : "Description for product 1"
},{
    "title" : "Title 2",
    "descr" : "Description for product 2"
},{
    "title" : "Title 3",
    "descr" : "Description for product 3"
},{
    "title" : "Title 4",
    "descr" : "Description for product 4"
}]

When I run all of this code together, I just get a blank screen. I have been able to display the array in the ng-repeat with an $http.get() call directly in the controller (from this question, see code below)...

pageApp.controller('productStreamCtrl', function($scope, $http) {
    $http.get('products.json')
        .then(function(result){
            $scope.products = result.data;                
});

...but I want this array to be accessible globally. I can't seem to get the factory to work.

I think the issue might be with how I'm calling my array from the service or with asynchronous transfer. I do get a JSON syntax error, but I get the same error with the working controller example. Any ideas?

M B · Accepted Answer · 2016-12-02 15:44:29Z

0

your promise is not completed when you are setting your variable. Change your factory to return a function and then call the function in your controller.

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

pageApp.controller('productStreamCtrl', function($scope, ProductStreamService) {
    ProductStreamService.getProducts().then(function(data){
        $scope.products = data;
    }); 
});

pageApp.factory('ProductStreamService', function($http) { 


    function getProducts(){
       return $http.get('products.json').then(function(data) {
            return data;
        }); 
    } 

    return {getProducts: getProducts};
});

answered Dec 2, 2016 at 15:44

M B

2,32627 silver badges36 bronze badges

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

1 Comment

ctrlawkdel Over a year ago

Thank you! One minor change: the 'then' function should pass a variable other than data, and data should be a property of that variable. then(function(result){return result.data;});

Collectives™ on Stack Overflow

AngularJS: read JSON array from file into a Factory for use in ng-repeat

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related