Angular ngrepeat not showing any data from an array of objects

Question

I was wondering what I am doing wrong with angular as the ngrepeat is not displaying the data.

I have a fiddle here http://jsfiddle.net/e0e7dee5/

<div ng-controller="MyCtrl">
    <div class="container-fluid">
        <div ng-repeat="u in utilities.all">
            {{u.name}}
        </div>
    </div>
</div>

Above should be right?

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

function MyCtrl($scope) {
    //var utilities = this;

    var utilities = {};

    utilities.all = [{ .... }];   // this is my data  it is in the fiddle
    console.log(utilities.all);  // this displays array of objects

}

Which version of Angular are you using? Global function controllers are not supported after 1.3. And declare utilities on $scope. Working Demo — Tushar
– Tushar, Commented Mar 13, 2017 at 9:00
Don't use global function - here is a modified fiddle that uses angular 1.6 cdn and is not global and works for what you are doing jsfiddle.net/qvzses4o — Tom Stickel
– Tom Stickel, Commented Mar 13, 2017 at 9:14

Hadi · Accepted Answer · 2017-03-13 09:00:34Z

You should change var utilities = {}; to $scope.utilities = {};

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

function MyCtrl($scope) {
	//var utilities = this;

  $scope.utilities = {};

  $scope.utilities.all = 
    [{
      "programId": 1062,
      "name": "Atlantic City Electric",
      "utilityTypeName": "Electric",
      "programName": "Test Program 24",
      "rate": 0.0775,
      "term": 12,
      "serviceReference": false,
      "accountNumberTypeName": "Account Number",
      "accountNumberLength": 10,
      "msf": 4.95,
      "etf": 100,
      "unitOfMeasureName": "KwH",
      "meterNumberLength": null,
      "zip": "85281",
      "$$hashKey": "object:325"
    }, {
      "programId": 1063,
      "name": "Atlantic City Electric",
      "utilityTypeName": "Electric",
      "programName": "Test Program 12",
      "rate": 0.0875,
      "term": 24,
      "serviceReference": false,
      "accountNumberTypeName": "Account Number",
      "accountNumberLength": 10,
      "msf": 5.95,
      "etf": 150,
      "unitOfMeasureName": "KwH",
      "meterNumberLength": null,
      "zip": "85281",
      "$$hashKey": "object:326"
    }, {
      "programId": 1064,
      "name": "Atlantic City Electric",
      "utilityTypeName": "Gas",
      "programName": "Test Gas Program 12",
      "rate": 0.555,
      "term": 12,
      "serviceReference": false,
      "accountNumberTypeName": "Account Number",
      "accountNumberLength": 10,
      "msf": 1,
      "etf": 10,
      "unitOfMeasureName": "Therm",
      "meterNumberLength": 5,
      "zip": "85281",
      "$$hashKey": "object:333"
    }];
 

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
 
 <div class="container-fluid" ng-repeat="u in utilities.all">
   <div>
   {{u.name}}
   </div>
 </div>
 
</div>

Collectives™ on Stack Overflow

Angular ngrepeat not showing any data from an array of objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related