angular array not outputting in ng-repeat

Question

I have an array called reviews in my app.js file. I'm trying to output the two hardcoded reviews on the screen, but nothing appears. The error in the console says that the mainfunction is undefined, but I defined it I though with the correct syntax. Can anyone tell me what's the issue with my code. currently the page is blank and no reviews are outputting to the screen.

app.js

 var app = angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('/page1', {
templateUrl: 'page1.html'

})
.when('/page2', {
    templateUrl: 'page2.html'

});

$locationProvider.html5Mode({enabled: true, requireBase: false});
app.controller('mainController', function($scope){
$scope.reviews = [
{
    name: 'Joe',
review: "awesome site. Super informative"
},
{
name: 'Bill',
review: "Sweet site dude!"

}
];

});

}]);

index.html

   <html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="app.css">

</head>
<body>
<div id="headerBar">
<a ng-href="/page1" id="page1">Page 1</a>
<a ng-href="/page2" id="page2">Page 2</a>
</div>
<div id="templateView" ng-view></div>

<div id="reviews" ng-controller="mainController">
<div id="reviewOutput" ng-repeat="review in reviews">
    {{review.name}}

</div>


</div>
<script src='bower_components/angular/angular.js'></script>
<script src="bower_components/angular-route/angular-route.js">

</script>
<script src="app.js"></script>
</body>
</html>

Console Error

Error: [ng:areq] Argument 'mainController' is not a function, got undefined
http://errors.angularjs.org/1.5.7/ng/areq?p0=mainController&p1=not%20a%20function%2C%20got%20undefined
    at angular.js:68
    at assertArg (angular.js:1885)
    at assertArgFn (angular.js:1895)
    at $controller (angular.js:10210)
    at setupControllers (angular.js:9331)
    at nodeLinkFn (angular.js:9116)
    at compositeLinkFn (angular.js:8510)
    at compositeLinkFn (angular.js:8513)
    at compositeLinkFn (angular.js:8513)
    at publicLinkFn (angular.js:8390)

That's the exact error? "mainfunction is undefined"? You are not assigning reviews to your controller. Instead of var reviews = you should have this.reviews =. — Lex
– Lex, Commented Jun 24, 2016 at 17:33
for the two-way data binding feature in angularjs, you need to store your variables in the $scope object. Instead of var reviews = [...], write $scope.reviews = [...] — Roberto Linares
– Roberto Linares, Commented Jun 24, 2016 at 17:33
@RobertoLinares $scope is not necessary when using controllerAs syntax. — Lex
– Lex, Commented Jun 24, 2016 at 17:34
@Lex oh neat! I didn't know that, since the angularjs documentation only uses $scope; but you are right, you can use the controllerAs syntax. — Roberto Linares
– Roberto Linares, Commented Jun 24, 2016 at 17:37

JB Nizet · Accepted Answer · 2016-06-24 17:36:04Z

2

Variables in angular expressions refer to attributes of the $scope. Not to local variables defined in the controller, which, by definition, are only accessible from the controller (since they are local variables).

app.controller('mainController', function($scope) {
    $scope.reviews = [ ... ];
});

and

<div id="reviewOutput" ng-repeat="review in reviews">

Since you're using controllerAs, the controller itself is in the $scope, in a field that you chose to name ctrl. So the view can access the controller, and its fields. So you can do

app.controller('mainController', function() {
    this.reviews = [ ... ];
});

and

<div id="reviewOutput" ng-repeat="review in ctrl.reviews">

edited Jun 24, 2016 at 17:36

answered Jun 24, 2016 at 17:34

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

4 Comments

Lex Over a year ago

The OP is using ng-controller="mainController as ctrl" so $scope is not appropriate in this situation.

JB Nizet Over a year ago

Yes, I noticed it. I've amended my answer.

Khan Over a year ago

I changed my vote after the correction, but I think it would be simpler and more correct to make reviews part of the controller.

user6680 Over a year ago

I updated my code based on your suggestions, but the variables aren't outputting the review.name still. I'm also getting a controller error, which could be an issue, but I don't see anything wrong with syntax. I posted the controller error above with the updated code.

Khan · Accepted Answer · 2016-06-24 17:38:58Z

0

Currently your reviews array is private. Attach it to this to make it part of the controller.

...

this.reviews = [
{
    name: 'Joe',
    review: "awesome site. Super informative"
},
{
    name: 'Bill',
    review: "Sweet site dude!"    
}
];

answered Jun 24, 2016 at 17:38

Khan

18.2k5 gold badges52 silver badges60 bronze badges

Comments

HaikelO · Accepted Answer · 2016-06-24 18:08:20Z

0

try this https://plnkr.co/edit/1zn6FLr8oRWHE9Y89k4z?p=preview

app.controller('mainController',['$scope', function($scope){
   $scope.reviews = [
   {
       name: 'Joe',
       review: "awesome site. Super informative"
    },
    {
       name: 'Bill',
       review: "Sweet site dude!"

     }];

}]);

if you want to use object in DOM you need to add $scope

edited Jun 24, 2016 at 18:08

answered Jun 24, 2016 at 17:35

HaikelO

1065 bronze badges

Collectives™ on Stack Overflow

angular array not outputting in ng-repeat

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related