AngularJS: code not working when iterating through object

Question

I am trying to populate a list of employee objects from my controller empctrl in a template.

Here's the controller:

app.controller('employeeController', function ($scope, employeeService) {

    this.employees = {};

    this.populateTable = function (data) {

        this.employees = data;
    };

    var error = function (err) {
        console.log("Error: " + err);
    };

    // Call Service to List all Employees
    console.log("Service called to populate table.");
    employeeService.output().then(this.populateTable, error);
    this.populateTable();

});

However, this code that I wrote isn't working:

<div ng-repeat="employee in empctrl.employees.allEmployees" class="table_row">
    <div class="table_column" style="width:2%">{{ $index + 1 }}</div>
    <div class="table_column" style="width:8%">{{ employee.employeeName}}</div>
    <!-- 7 more columns -->
</div>

Nothing shows up in the UI.
Instead, if I write $scope.employees in the controller, it works:

<div ng-repeat="employee in employees.allEmployees" class="table_row">

Since I know how tempting it is to do $scope.<everything> in the controller, I'm trying to avoid using $scope as much as possible.

If someone could demonstrate the proper use of $scope and difference betwee alias.abc and $scope.abc (where alias is an alias of controller), I'll be thankful.

Edit: Exact same question is this: 'this' vs $scope in AngularJS controllers

Thanks for this link, PankajParkar.

Need to see more of your code (at least your controller code). Fiddle/plunker/codepen would be nice. — LJ.Wizard, Feb 26 '16 at 08:54
Your controller code - `empctrl` by the looks of it. I assume you're using `controller as` syntax? — LJ.Wizard, Feb 26 '16 at 08:56
do you have use `ng-controller="employeeCtrl as empctrl"`(soemthing like this, assumed controller name as `employeeCtrl`) — Pankaj Parkar, Feb 26 '16 at 08:57
Could you add your controller code, where you are getting employees? — Unknown, Feb 26 '16 at 09:00
@Ties because of scope soup: http://www.technofattie.com/2014/03/21/five-guidelines-for-avoiding-scope-soup-in-angular.html — cst1992, Feb 26 '16 at 09:12
@cst1992 I mark it as duplicate because the answer has efficient information about what you are asking..' — Pankaj Parkar, Feb 26 '16 at 09:52
@PankajParkar Okay. I hope no one downvotes, though - it's hard to find one's exact question among the millions that are there. — cst1992, Feb 26 '16 at 09:56
@cst1992 frankly speaking [this is convenient one](http://stackoverflow.com/a/19940503/2435473) — Pankaj Parkar, Feb 26 '16 at 09:58

score 2 · Accepted Answer · edited May 23 '17 at 12:07

2

The problem is this which you are accessing inside populateTable function is not this which you have there in your controller function.

Better do keep this variable inside some variable, so that by having it you will make sure you are referring to correct object.

Controller

app.controller('employeeController', function ($scope, employeeService) {
    var vm = this;
    vm.employees = {};

    vm.populateTable = function (data) {
        vm.employees = data;
    };

    var error = function (err) {
        console.log("Error: " + err);
    };

    // Call Service to List all Employees
    console.log("Service called to populate table.");
    employeeService.output().then(vm.populateTable, error);
    vm.populateTable();
});

For more detail, I'd highly recommend you to readup on this article

If you are confused with this vs scope then do read up on this answer

edited May 23 '17 at 12:07

Community

1
1

answered Feb 26 '16 at 09:01

Pankaj Parkar

134,766
23
234
299

So if I use `var vm = this`, it'll work inside functions too? – cst1992 Feb 26 '16 at 09:06
@cst1992 yupe.. do try that.. – Pankaj Parkar Feb 26 '16 at 09:08
If I use a `function()` syntax instead of `var x = function()` i.e. just write a declaration, will `this` still refer to the function rather than the controller? – cst1992 Feb 26 '16 at 09:10
Works, thanks. Could you help me with the alias vs scope thing? I want to know scenarios when $scope is the ideal solution. In this case it wasn't, but it must be in some other? – cst1992 Feb 26 '16 at 09:19
@cst1992 Ideally, if you ask me what to chose.. I'll recommend you to follow `this` instead of `scope`, as it will be best to access scope variable with aliases on view & will make you once step closer to angular2 migration.. Still if you want more detail you can refer [this answer](http://stackoverflow.com/a/14168699/2435473) – Pankaj Parkar Feb 26 '16 at 09:21
Excellent. Could you add this link in your answer? – cst1992 Feb 26 '16 at 09:32
@cst1992 done. Thanks :) – Pankaj Parkar Feb 26 '16 at 09:40
@cst1992, How a function is defined has no effect on what `this` refers to within the function. The value of `this` is determined by how the function is called. See [`this` on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) for details. – kicken Feb 26 '16 at 09:43
@kicken technically you can't extend this question. as referenced answer has efficient detail over it.. otherwise I'd mark it as duplicate.. – Pankaj Parkar Feb 26 '16 at 09:50

Ties · Answer 2 · 2016-02-26T09:12:10.077

0

Add your variables to the $scope instead of this like:

$scope.customers = {};

$scope.populateTable = function (data) {
    $scope.employees = data;
};

Edit: both methods work. See this article for a in depth explanation.

edited Feb 26 '16 at 09:12

answered Feb 26 '16 at 09:03

Ties

806
7
13

Could you explain why? – cst1992 Feb 26 '16 at 09:07
Everything you bind to the `$scope` will be available in your view, which is what the `$scope` variable is designed to do. – Ties Feb 26 '16 at 09:09
@Ties this isn't correct answer..what OP wants to do is make working it with `controllerAs` approach.. which mean he have to have variable bounded to `this` context – Pankaj Parkar Feb 26 '16 at 09:11
Just trying to explain why this is also a good option. Because using `this` can be difficult sometimes with function contexts. – Ties Feb 26 '16 at 09:14
@Ties who said its difficult? – Pankaj Parkar Feb 26 '16 at 09:37
@PankajParkar because you have to assign `this` to a second variable to be able to use it inside functions – Ties Feb 26 '16 at 15:20

score 0 · Answer 3 · answered Feb 26 '16 at 09:47

0

Substituting "this" to vm (View-Model) will solve your issue. Not polluting $scope object is a groovy thing. this is a global context and its value depends on a function call.

So, in your controller just assign,

var vm = this;
  vm.empTable = function (data) {
  vm.employeeList = data.data; 
};

..and use the vm object elsewhere in your controller. It will be useful to keep the code clean while working with multiple controllers in a view.

Don't forget to give an alias name to the controller,

<div ng-controller="MainCtrl as main">
    <div ng-repeat=" employee in main.vm.employeeList ">
        {{employee.name}}
    </div>
</div>

answered Feb 26 '16 at 09:47

Vinay

548
2
12

Thanks for the meaning of `vm`, I didn't know about that. BTW, using any name works fine; I'm using `Controller` in my own code to know that this variable has the controller's `this`. – cst1992 Feb 26 '16 at 09:54
Yes of course. Any name would be fine! – Vinay Feb 26 '16 at 09:59

AngularJS: code not working when iterating through object

3 Answers3

Linked