current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I can't seem to display any JSON data from my factory. I'm pretty sure the contractors.json file is loading correctly because the console complained about its syntax a few times. My grunt watch isn't giving me any errors, nor is the console. I'm new to angular and I'm not sure what is wrong. 

  'use strict';

angular.module('angularPlainApp', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute' ])

  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  })

  .controller('MainCtrl', function ($scope, dataList) {
    $scope.contractors = dataList.getList();

    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  })

  .factory('dataList', function($http, $q) {
    return {
      getList: function() {
        var deferred = $q.defer();
        $http.get('scripts/contractors.json').success(function(data){
          deferred.resolve(data);
        }).error(function(){
          return deferred.promise;
        });
      },
    };
  });

I put my app.js in all different types setups and never displayed any of the data, same with the html snippet. 

<aside class= "contractors">
    <ul class= "contractors-list" ng-controller="MainCtrl" >
    <li ng-repeat = "contractor in contractors">
            <div class="headshot-wrapper">
                <img src='path/to/img.img'>
            </div>
            <div class="contractor-summary-info">
            <h3>{{ contractors.name }}</h3>
            <h4 class="summary-subhead">{{ contractors.position }}</h4>
                <p>{{ contractors.number }}</p>
                <p>{{ contractors.jobFunction }}</p>
            </div>
        </li>
    </ul><!--.contractor-summary-->
    </aside><!--contractor-list-->

No information from my external contractors.json file is showing up.

I'm using bower, yeoman and gruntjs. Any tips, tricks or general input is greatly appreciated. Thanks in advace!

share|improve this question

1 Answer 1

up vote 0 down vote accepted

you did not return the promise:

var deferred = $q.defer();
    $http.get('scripts/contractors.json').success(function(data){
      deferred.resolve(data);
    }).error(function(){
      //
      // !!!! here is your mistake! 
      // You only return the promis if an error occured.
      // 
      return deferred.promise;
    });

try it this way:

var deferred = $q.defer();
$http.get('scripts/contractors.json').success(function(data){
    deferred.resolve(data);
}).error(function(){
   deferred.reject();
});
return deferred.promise;
share|improve this answer
    
Thank you! This got me started a little bit, still have a few more bugs to work out. Like I said, I'm new to Angular and Javascript and I wasn't exactly sure what that section was doing, just added it from a tutorial. –  ericmackey Feb 5 '14 at 19:37

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.