view not gathering data from service through controller

Question

Having trouble loading an external json file and having it's contents display on my view. I've included my view, controller and services code. What do I need to change?

view.html

<div ng-controller='BaseCtrl'>
    <table class="table table-hover">
        <tbody>
           <tr class="tr-sep" ng-repeat="example in examples" ng-click="showUser(example)">
              <td>{{example.name}}</td>
              <td>{{example.type}}</td>
              <td>{{example.size}}</td>
           </tr>
        </tbody>
    </table>
</div>

controller.js

'use strict';

angular.module('projyApp')
  .controller('BaseCtrl', function ($scope, data) {
    $scope.examples = data.getAllExamples();

    $scope.showUser = function(example) {
        window.location = '#/user/' +example.size;
    };

  });

service.js

'use strict';

angular.module('projyApp')
  .service('data', function data() {
        var examples;

        var getAllExamples = function () {

            $http.get("../../TestData/Examples.json").success($scope.examples = data.examples);
        };

  });

in your service you need to return data.examples and not assign it to $scope. $scope is undefined in the data service. — Gilad Peleg, Aug 21 '13 at 21:01
console: "TypeError: Object # has no method 'getAllObservers' at new " — captainrad, Aug 21 '13 at 21:09
I don't see anywhere in your posted code getAllObservers function. Can you make a JsFiddle? — Gilad Peleg, Aug 21 '13 at 21:19
data service should return the function. i.e: `return { getAllExamples:getAllExamples}` — Gilad Peleg, Aug 21 '13 at 21:23
Is that your actual service code? It doesn't seem correct at all. — Michael Benford, Aug 21 '13 at 22:59
@captainrad I've just posted an answer explaning the issues I see in your code. — Michael Benford, Aug 22 '13 at 17:51

Michael Benford · Accepted Answer · 2013-08-22T18:56:18.973

Your service code isn't correct. I see the following problems:

You're creating a local variable getAllExamples that's not accessible from outside the service;
You're using the $http service, but that dependency isn't expressed in the service constructor;
You're trying to update the scope from the service, but it's inaccessible from there. Plus, the $scope variable is not even defined inside the service code.

Here's how your service could look like:

.service('data', function($http) {
    this.getAllExamples = function(callback) {
        $http.get("../../TestData/Examples.json")
            .success(function(data) {
                if (callback) callback(data.examples);
            });
        };
});

And your controller code would be like this:

.controller('BaseCtrl', function ($scope, data) {
    data.getAllExamples(function(examples) {
        $scope.examples = examples;
    });

    $scope.showUser = function(example) {
        window.location = '#/user/' +example.size;
    };
});

You could ditch the callback in the getAllExamples function and work directly with the $http.getreturned promise, but that's a bit more complicated.

Update Added a Plunker script to illustrate the code above.

I updated the post to include a Plunker script. It's working just fine. — Michael Benford, Aug 22 '13 at 18:55

shaunhusain · Answer 2 · 2013-08-21T23:37:25.777

Main module definition should look like:

angular.module("projyApp",[/*dependencies go here*/]);

Service should look like

//this use of module function retrieves the module
//Note from comments in angular doc: This documentation should warn that "angular.module('myModule', [])" always creates a new module, but "angular.module('myModule')" always retrieves an existing reference.)
angular.module('projyApp')
  .service('dataService', [/*dependencies,*/function() {
        var service = {
            examples:[],
            getAllExamples = function () {

                $http.get("../../TestData/Examples.json").success(function(returnedData){examples = returnedData});
            }
       }
       return service;
  });

Controller should look like:

angular.module('projyApp')
  .controller('BaseCtrl', function ($scope, dataService) {
    $scope.examples = [];

    $scope.showUser = function(example) {
        window.location = '#/user/' +example.size;
    };
    $scope.$watch(function(){return dataService.examples}, function(newVal,oldVal) {$scope.examples = newVal});

  });

Also you can add

debugger;

on an line to trigger Chrome to break (like a breakpoint but without having to dig through the scripts at run-time) so long as the Debugging Panel is open (F12)

this line: $http.get("../../TestData/Examples.json").success(function(returnedData){examples = returnedData}); is giving me an unexpected "=" — captainrad, Aug 22 '13 at 15:43

L105 · Answer 3 · 2013-08-22T16:00:33.643

You should use a callback instead of assigning in to a scope in you data service. By doing that, you can use this function in multiple controllers an assign values to appropriate scopes.

Data Service

  var getAllExamples = function (callback) {

            $http.get("../../TestData/Examples.json").success(function(data) {
                if (typeof callback === "function") callback(data);
            });
   };

Controller

data.getAllExemples(function(data) {
    $scope.examples = data;
});

EDIT

Another what is to create a promise object.

Data Service

  var getAllExamples = function () {

            return $http.get("../../TestData/Examples.json");
   };

Controller

var promise = data.getAllExemples();

promise.then(function(data) {
   $scope.examples = data;
});

EDIT 2

In your service, you need to return your functions

angular.module('projyApp')
  .service('data', function data() {
        var examples;

     return {
            getAllExamples: function () {

                 $http.get("../../TestData/Examples.json").success(...);

            }
};

  });

You can also bind the promise directly to the view and Angular will automatically render the data as soon as the promise gets resolved. — Michael Benford, Aug 22 '13 at 03:01
console is printing "Object # has no method 'getAllObservers'" for this aswell. — captainrad, Aug 22 '13 at 15:50

view not gathering data from service through controller

3 Answers3