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

0

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.

answered May 8, 2014 at 18:17

Jim K.

9348 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to render line breaks from JSON to HTML

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related