Rows Concatenation in AngularJS

Rajnilari2015
Posted by in AngularJS category on for Beginner level | Points: 250 | Views : 180 red flag

In this article we will look into Row Concatenation in AngularJS


 Download source code for Rows 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.

Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,Microsoft_MVP,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)