Formatting JSON String Into Paragraphs

Question

I am using Angular JS for a simple web-app.

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." } ]

AngularJS - controllers.js

var exhibitListControllers = angular.module('exhibitListControllers', ['ngAnimate']); exhibitListControllers.controller('ListController', ['$scope', '$http', function($scope, $http){ $http.get('js/data.json').success(function(data) { $scope.exhibits = data; $scope.exhibitOrder = 'name'; }); }]);

Mayur Agarwal · Accepted Answer · 2017-09-21 20:42:16Z

from https://docs.angularjs.org/api/ng/directive/ngBindHtml

and

https://docs.angularjs.org/api/ngSanitize

ng-bind-html evaluates the expression and inserts the resulting HTML into the element in a secure way. By default, the resulting HTML content will be sanitized using the $sanitize service. To utilize this functionality, ensure that $sanitize is available, for example, by including ngSanitize in your module's dependencies (not in core AngularJS). In order to use ngSanitize in your module's dependencies, you need to include "angular-sanitize.js" in your application.

In html page you can do this

<div ng-controller="ExampleController"> <p ng-bind-html="myHTML"></p> </div>

and in your controller :

angular.module('bindHtmlExample', ['ngSanitize']) .controller('ExampleController', ['$scope', function($scope) { $scope.myHTML = 'I am an <code>HTML</code>string with ' + '<a href="#">links!</a> and other <em>stuff</em>'; }]);

or

You can also try something like that:

 app.filter('to_trusted', ['$sce', function($sce) { return function(text) { return $sce.trustAsHtml(text); }; }]);

and then, in view:

 ng-bind-html=" myHTML | to_trusted"

Thank you for sending this along! I'm trying to follow this and though I think I understand it I am struggling incorporating it with my current controller. I added the Angular JS - controllers.js to my question to clarify my current set up a little better and find some additional guidance to this answer.
In the $scope.myHTML it references a string but this string is part of a JSON object inside of a JSON file. I'm not sure how to incorporate it.
I have not tried your code but I don't think it might matter, it should work with JSON or non-JSON strings.
Unforuntately it just deletes the JSON bio and shows it with brackets: {{exhibits[whichItem].bio}}. There's going to be 9 of these objects and the one with the HTML formatting is only the bio keys.

Collectives™ on Stack Overflow

Formatting JSON String Into Paragraphs

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related