How to render line breaks from JSON to HTML

Question

I am trying to build a testimonial website with AngularJS 1.1.5 and PHP

I have an array of JSON objects consisting of Name, Message and Date.

The real testimonial will be the attribute Message and there will be line breaks in the testimonial.

[ { "Name": "Snow White", "Message": "Dear all, I need a new line <br> Is it possible to do it in AngularJS?", "Date": "16/11/2013" }, { "Name": "Cinderalla", "Message": "Dear all, I need a new line <br> Is it possible to do it in AngularJS?", "Date": "10/11/2013" }, { "Name": "Ariel", "Message": "Dear all, I need a new line <br> Is it possible to do it in AngularJS?", "Date": "20/06/2013" } ]

After using $resource to get the array and link it to $scope.Ctestimonials, I used ng-repeat to render all the objects onto HTMl.

<div id="testimonialbody" ng-controller="TestimonialCtrl"> <ul class="testimonialul"> <li ng-repeat="testimonial in Ctestimonials" class="testimonialclass"> <blockquote> {{testimonial.Message}} </blockquote> <cite>{{testimonial.Name}}, {{testimonial.Date}}</cite> </li> </ul> </div>

However, I could not get the line breaks to render correctly in the html page. Does anyone know how can I do it?

Thank you

@epascarello Thought of that but ain't that exposed to cross scripting attack? — Wilson
– Wilson, Commented Dec 8, 2013 at 17:30

Raymond Elferink · Accepted Answer · 2013-12-08 17:14:26Z

7

Try this:

JSON.stringify({{testimonial.Name}},null,'\t') .replace(/\n/g,'<br />') .replace(/\t/g,'&nbsp;&nbsp;&nbsp;');

edited Dec 8, 2013 at 17:14

answered Dec 8, 2013 at 17:01

Raymond Elferink

2331 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Max Truxa Over a year ago

To be XHTML compatible use <br />.

Jim K. · Accepted Answer · 2014-05-08 18:17:04Z

As epascarello said, ngBindHtml handles this nicely. I'm not sure where it stood in 1.1.5, but it uses the $santize service to handle escaping. Per the docs, if $santize isn't available, it throws an exception rather than allowing an exploit.

Collectives™ on Stack Overflow

How to render line breaks from JSON to HTML

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related