Aochi Toxx Aochi Toxx - 4 months ago 13
AngularJS Question

Angularjs: Function to return data back to html

I have this weird problem that I expected to work but dose not.

In my template I'm using a table with a function call to retrieve a users name and display that data instead of the id of the user. I've tested the function by itself without using a html sided call and only in java script and it works. But I wonder why it won't return data back to the html side.



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

app.controller('MainCtrl', function($scope) {
$scope.Users = [{
"id": 1,
"display_name": "John Deer",
"role_id": 1,
}, {
"id": 2,
"display_name": "Julie Deer",
}, {
"id": 3,
"display_name": "John Smith",
}];
$scope.Departments = [{
"id": 1,
"created_by_id": 1,
"last_modified_by_id": 2,
"name": "Administrators",
}, {
"id": 2,
"created_by_id": 2,
"last_modified_by_id": 1,
"name": "Guest"
}, {
"id": 3,
"created_by_id": 1,
"last_modified_by_id": 2,
"name": "Manager"
}];

$scope.getUserByID = function(ID) {
console.log('Running getUserByID with: ' + ID + ', as the ID.')
angular.forEach($scope.Users, function(item, index) {
if (ID == item.id) {
console.log('Match is ' + this.Users[index].display_name);
return this.Users[index].display_name;
}
}, $scope);
}
});

/* Put your css in here */

.well {
background-color: lightgrey;
}

<!DOCTYPE html>
<html ng-app="plunker">

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css@3.3.6" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
<div class="panel-heading clearfix">
<div class="container col-sm-12">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<div class="form-group">
<input type="text" class="form-control" ng-model="filterDepartments" value="Search" data-toggle="tooltip" data-placement="top" title="Type here to search in the list." placeholder="Search Here">
</div>
</div>
<div class="col-sm-4">
</div>
</div>
</div>
<div class="col-sm-12 well">
<h3>Departments</h3>
<table id="example" class="display table" style="width: 100%; cellspacing: 0;">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Created By</th>
<th>Modified By</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
<th>Created By</th>
<th>Modified By</th>
</tr>
</tfoot>
<tbody>
<tr ng-repeat="y in Departments|filter:filterDepartments">
<td>{{y.id}}</td>
<td>{{y.name}}</td>
<td>{{getUserByID(y.created_by_id)}}</td>
<td>{{y.last_modified_by_id}}</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-12 panel">
<br>
<br>
</div>
<div class="col-sm-12 well">
<h3>Users</h3>
<table id="example" class="display table" style="width: 100%; cellspacing: 0;">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</tfoot>
<tbody>
<tr ng-repeat="x in Users">
<td>{{x.id}}</td>
<td>{{x.display_name}}</td>
</tr>
</tbody>
</table>
</div>
</body>

</html>





I made a plunk for you to play with: https://embed.plnkr.co/WUBKSD4pBxJnzc9ntUuO/

Let me know what you think as I am trying to find a solution to my problem.

Answer

A couple of changes to $scope.getUserByID.

One is that you can simply use the item object directly to get the display_name property from it.

The other issue is that putting a return in an angular.forEach does not break the loop so you just need to set a local var (userName) to the name initially that can be checked for a value and ultimately set as the return value.

$scope.getUserByID = function(ID) {
  console.log('Running getUserByID with: ' + ID + ', as the ID.')
  var userName;
  angular.forEach($scope.Users, function(item, index) {
    if (!userName) {
      if (ID == item.id) {
        userName = item.display_name;
        console.log('Match is ' + userName);
      }
    }
  }, $scope);

  return userName;
}

I've forked your plunk with it working.

Comments