Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to parse \n character received from server in text output and display it to the view using Angular

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 4.29k
    Comment on it

    While working with AngularJS, sometimes when we are receving data from the server and that data contains a string which has line-seperations in it in the form of \n, the angularJS is not able to parse \n and thus we see the entire string in one line instead of new lines wherever desired.

     

    For example:

    This is my controller which contains users object containing the user details like name & about_me.

    var testApp = angular.module('testApp', []);
    			
    testApp.controller('testController', function ($scope) {
      $scope.users = [
        {
          'name' : 'Rohit',
          'about_me' : 'I am optimistic.'
        },
        {
          'name' : 'Shaun',
          'about_me': 'I am a sportsman. I live in Us. I like to go for long drives'
        },
        {
          'name' : 'Amit',
          'about_me' : 'I am Amit, i belong to mumbai.\n I work on AngularJS'
        }
      ];
    });

    And this is my view which shows user's information,

    <div ng-app="testApp" ng-controller="testController">
      <ul>
        <li ng-repeat="user in users">
          <span>{{user.name}}</span>
          <p>{{user.about_me}}</p>
        </li>
      </ul>
    </div>

    Now as we can see about_me contains \n (new line). But angular does not parse it, and it treats it as a string and we do not see line break in the browser.


    In angular, we can create a custom filter to overcome this problem. Our custom filter will use the $sce angular service.


    We will be modifying our js file like this

    var testApp = angular.module('testApp', []);
    
    testApp.controller('testController', function ($scope) {
    	$scope.users = [
    	{
    		'name' : 'Rohit',
    		'about_me' : 'I am optimistic.'
    	},
    	{
    		'name' : 'Shaun',
    		'about_me': 'I am a sportsman. I live in Us. I like to go for long drives'
    	},
    	{
    		'name' : 'Amit',
    		'about_me' : 'I am Amit, i belong to mumbai.\n I work on AngularJS'
    	}
    	];
    	
    	angular.forEach($scope.users, function (key) {
    		key.about_me = key.about_me.replace(/\n/g, '<br/>');
    	});
    });
    
    testApp.filter('unsafe', function($sce) {
    	return function(val) {
    		return $sce.trustAsHtml(val);
    	};
    });

    First of all we converted all the /n characters to <br/> tags, because browser do not understand /n character.

     

    And we created a filter named 'unsafe' which will be used in the view to give a line break for /n characters which have been converted to <br/> as per our code.

     

    Now we will use this filter in our view with ng-bind-html directive to display about_me attribute.

    <div ng-app="testApp" ng-controller="testController">
    	<ul>
    		<li ng-repeat="user in users">
    			<span>{{user.name}}</span>
    			<p ng-bind-html="user.about_me | unsafe"></p>
    		 </li>
    	</ul>
    </div>

    And now this filter will treat the /n character as the new line character in our view.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: