Display ID in table as another Name/phrase - html

Question

I am wondering if there is a way to display for example an id in a table cell as another name from another object as their id's correspond to each other.
What i want to do is to display it in a way like this if there is something similar?
<td class="tableRowText"><p>{{l.SenderId}}</p></td>
in a way like this.
ng-options="x.ProcessId as x.Name for x in PL"
so that would be something like:
<td class="tableRowText"><p>{{l.SenderId}} as x.Name for x in PL</p></td>
WISHFULLY! :P hope you guys understand i'm just trying to get my point through.
Thanks in advance!
_____________EDIT:_______________________________
So this is the Table and how i request the data.
app.factory('getTableGridDataService', function ($resource, config) {
return $resource(config.apiURL + '/Logs/GetLogEvents', {}, { 'post': { method: 'POST' } })
});
scope.loggItems = [];
$scope.fillRealTable = function () {
var arrayBody = {
Sending: $scope.paramSending,
Receiving: $scope.paramReceiving,
Logging: $scope.paramLogging,
};
var query = postTableGridDataService.post({}, arrayBody);
query.$promise.then(function (data) {
var loggItemList = data;
$scope.loggItems = loggItemList
})
}
<table class="table table-striped table-condensed table-hover" id="MainTable">
<thead>
<tr>
<th ng-click="sort('SenderId')" style="cursor:pointer;">
Sender
<span class="glyphicon glyphicon-sort" ng-show="sortKey=='SenderId'" ng-class="{'glyphicon glyphicon-menu-up':reverse, 'glyphicon glyphicon-menu-down':!reverse}"></span>
</th>
<th ng-click="sort('ReceiverId')" style="cursor:pointer;">
Reciever
<span class="glyphicon glyphicon-sort" ng-show="sortKey=='ReceiverId'" ng-class="{'glyphicon glyphicon-menu-up':reverse, 'glyphicon glyphicon-menu-down':!reverse}"></span>
</th>
<th ng-click="sort('LoggingId')" style="cursor:pointer;">
Logging source
<span class="glyphicon glyphicon-sort" ng-show="sortKey=='LoggingId'" ng-class="{'glyphicon glyphicon-menu-up':reverse, 'glyphicon glyphicon-menu-down':!reverse}"></span>
</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="l in loggItems.LogEventList|filter:search|orderBy:sortKey:reverse|itemsPerPage:15" pagination-id="mainPagination">
<td class="tableRowText"><p>{{l.SenderId}}</p></td>
<td class="tableRowText"><p>{{l.ReceiverId}}</p></td>
<td class="tableRowText"><p>{{l.LoggingId}}</p></td>
</tr>
</tbody>
</table>
I also get another object from my api in which i have the names for the Sending-ID, Reciever-ID and Logging-ID and i want those names displayed in the table instead of the id's from my Object in wich i display in the tabl. how do i achieve that?
The other object with the corresponding ID's and names:
app.factory('getSearchFormData', function ($resource, config) {
return $resource(config.apiURL + '/SearchFormObj/getSearchFormItems', {} ,{'get': {method:'GET'}})
});
$scope.SL = [];
function SearchData() {
var query = getSearchFormData.get();
query.$promise.then(function (data) {
$scope.SL = data.SystemList;
console.log($scope.SL);
});
};
SearchData()
Here is the object returned from getSearchFormData:

Answer 1

The basic idea is in your controller which depends on both services, you wait for both promises to resolve, then loop through your log items and either replace the ids with the names, or add then names to each log item, if you want to keep the ids.
$scope.fillRealTable = function () {
var arrayBody = {
Sending: $scope.paramSending,
Receiving: $scope.paramReceiving,
Logging: $scope.paramLogging,
};
var p1 = postTableGridDataService.post({}, arrayBody).$promise;
var p2 = getSearchFormData.get().$promise;
//it might be $q.all([p1.promise,p2.promise])
$q.all([p1,p2]).then(function(data1, data2) {
var loggItemList = data1;
var SL = data2.SystemList;
loggItemList.forEach(function (item) {
item.SenderName = SL[item.SenderId].name;
item.ReceiverName = SL[item.ReceiverId].name;
item.LogginName = SL[item.LogginId].name;
});
$scope.loggItems = loggItemList;
});
}
The code in the forEach is all speculation, since you do not provide the structure of the data returned by getSearchFormData, so this example assumes it's key-value list of objects with the key being one of the ID. E.g:
{
"A001" : { name: "John Smith" },
"B001" : { name: "Bruce Wayne" }
}
P.S: An alternative to this method is to move the whole mapping in getTableGridDataService and have that service call the other, meaning your view logic remains simple, since it will receive the full result from the service.