0

I am volunteering to write a quick AngularJS App for a non-profit. I have set up Angular successfully but the one problem I am coming across stems from the JSON.

I have a JSON object that contains multiple paragraphs. Therefore I need to separate the paragraphs onto two lines. I did some research and I found some answers to similar questions but because they were not put in context I did not understand them. I tried looking to see if JSON had something built in that forced a line break, because that would do, but I did not find that.

Help is greatly appreciated!

HTML w/ Angular JS

<div class="bio">
    {{exhibits[whichItem].bio}}
</div>

JSON

[
  {
    "name":"Name goes here",
    "bio":"First long block of text goes here then it needs a break <br /> and the second long block of text is here."
  }
]
user5854648
  • 1,029
  • 2
  • 11
  • 36
  • Maybe a duplicate of https://stackoverflow.com/questions/18340872/how-do-you-use-sce-trustashtmlstring-to-replicate-ng-bind-html-unsafe-in-angu – Isaac Sep 19 '17 at 21:50
  • I just took a look at that question. I do not understand the question or the answer and I am looking for something more in-line and explanatory to my current situation. Thanks! – user5854648 Sep 19 '17 at 23:00

1 Answers1

0

@user5854648 Your back-end sending the JSON response in this format .If you are using angular version greater than 1.2 to display the text content with html tags(People's calling this as unsafe html ) use angularjs inbuilt service called $sce .To make it as a reusable component created a custom filter.

var demoApp = angular.module('demoApp',[]);
demoApp.filter('trustAsHtml', [
    '$sce',
    function($sce) {
        return function(value) {
            return $sce.trustAsHtml('html', value);
        }
    }
]);

then make changes in html like

<div class="bio">
    {{exhibits[whichItem].bio | trustAsHtml}}
</div>

or 

<div class="bio">
        <p ng-bind='exhibits[whichItem].bio | trustAsHtml'></p>
 </div>
snowp
  • 495
  • 1
  • 6
  • 22
  • Hi Snowp, I feel like I am close but I am missing a concept here that is preventing it from working. I see that the return $sce.trustAsHtml ('html', value); is printing exactly html as a string. I'm not sure how to call the JSON file here that shows the appropriate JSON text being called which is {{exhibits[whichItem].bio}}. I don't know what to type in your example to exactly pull that which is within the brackets. – user5854648 Sep 22 '17 at 20:07
  • Did you are asking about how to display json response ? – snowp Sep 26 '17 at 13:40
  • I can get the JSON to display, but it displays with the HTML tags rather than styling the HTML. So if I were to wrap something in it wouldn't appear bold, it was literally show the tags around the text. – user5854648 Sep 26 '17 at 17:45