In this article we will look into Row Concatenation in AngularJS
Introduction
Suppose we have the below
We need to concatenate the rows such that the output should look like
In this article we will look into Row Concatenation in AngularJS
Using the code
Let us first create the personController.js
//creating an application module
var personAppModule = angular.module("personApp", []);
//The below code will read the data from personDataSource and will pass to the $scope.persons variable
personAppModule.controller("personCtrl", function($scope){
var personDataSource = [
{
"personName": "Niladri",
"mobileNumber": ["1111111111","2222222222","3333333333","4444444444"]
},
{
"personName": "Babai",
"mobileNumber": ["5555555555","6666666666"]
},
{
"personName": "Arina",
"mobileNumber": ["7777777777","8888888888","9999999999"]
},
{
"personName": "RNA Team",
"mobileNumber": ["1234567890"]
}
];
$scope.persons = personDataSource;
});//end controller
At first we are creating the personDataSource and then assigning it to $scope.persons.
The $scope.persons variable acts as a glue for carrying the data from the controller to the view (i.e. html part).
Now once the controller is ready, it's time to bind the data to the view. So let's create the below html
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js">
</script>
<script src="personController.js"></script>
</head>
<body ng-app="personApp">
<div align="center"><b><u><font size="8px">Person's Mobile Information</font></u></b></div>
<div ng-controller="personCtrl" align="center">
<table border="1">
<tr>
<th>Name</th>
<th>Mobile Number</th>
</tr>
<tr ng-repeat="p in persons">
<td><span>{{p.personName}}</span></td>
<td><span ng-repeat="mN in p.mobileNumber">{{mN}}</span></td>
</tr>
</table>
</div>
</body>
</html>
At this stage, the output will be
At first we are loading the AngularJS and the personController.js files. Then we are defining the Application Module(personApp) inside the body by using the ng-app.
ng-app is an AngularJS directive which indicates the start of the AngularJS application.Then by using the ng-controller, we have attached the controller (personCtrl) to the view (html).Now since we have multiple records to loop through, we need to use the ng-repeat directive which is basically a kind of loop in AngularJS parlance.
Once we loop through the person records, then by using expression, we have bind the properties from controller to the view.
But the output is not as expected since the "Mobile Numbers" are not distinguishable. In order to do so, we will propose two solutions.
Using $last
To identify the last element in iterator, we use the $last. Now using this $last, let us see how can we arrive at our goal.
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js">
</script>
<script src="personController.js"></script>
</head>
<body ng-app="personApp">
<div align="center"><b><u><font size="8px">Person's Mobile Information</font></u></b></div>
<div ng-controller="personCtrl" align="center">
<table border="1">
<tr>
<th>Name</th>
<th>Mobile Number</th>
</tr>
<tr ng-repeat="p in persons">
<td><span>{{p.personName}}</span></td>
<td><span ng-repeat="mN in p.mobileNumber">{{mN}}{{$last ? '' : ', '}}</span></td>
</tr>
</table>
</div>
</body>
</html>
The {{$last ? '' : ', '}} checks if the element in the iterator list is not the last element, then append "," and if it is the last element, then append a blank space(''). This does the trick.
The output is as under
If we observe properly, the performance of the above solution is not that good since we are performing looping twice that will yield to O(n*2) algorithmic complexity. Below we present another solution for the problem.
Using JavaScript's Join function
The join() method joins all elements of an array into a string. Let us now solve the problem as under
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js">
</script>
<script src="personController.js"></script>
</head>
<body ng-app="personApp">
<div align="center"><b><u><font size="8px">Person's Mobile Information</font></u></b></div>
<div ng-controller="personCtrl" align="center">
<table border="1">
<tr>
<th>Name</th>
<th>Mobile Number</th>
</tr>
<tr ng-repeat="p in persons">
<td><span>{{p.personName}}</span></td>
<td><span>{{p.mobileNumber.join(', ')}}</span></td>
</tr>
</table>
</div>
</body>
</html>
The {{p.mobileNumber.join(', ')}} joins all elements of the "mobileNumber" array into a single string. Another advantage of this is that, if an element is undefined or null, it is converted to the empty string.
The output is same as shown under
Conclusion
This article taught us how to use Join or $last for concatenation of rows in AngularJS. Hope this will be helpful. Thanks for reading.Zipped file is attached herewith.