rfcabal rfcabal - 4 days ago 5
JSON Question

Convert JSON HTML string to HTML

I have developed an AngularJS Moodle webapp using Moodle WebService and I'm triying to show a quiz from Moodle eLearning.

I can get every question using

$http.
. now the problem is that when I get the question, every question comes with a HTML code like this:

JSON Response

An I'm using this controlores to get the response (url5)

app.controller('quizCtrl', function($rootScope, $scope, $http) {

url4 = concatUrl + 'mod_quiz_start_attempt' + '&quizid=2';

$http.get(url4).then(function (response) {
//console.log(response.data);
})

url5 = concatUrl + 'mod_quiz_get_attempt_data' + '&attemptid=7&page=0';

$http.get(url5).then(function (response) {
console.log(response.data);
$scope.questions = response.data.questions;
})
})


When I show the question in my HTML using the following code, I'm getting HTML code as a string and tried to used
ng-bind-html
but I got an error.

<div role="main" id="main" class="ui-content scroll" ng-app="mainApp">
<div data-role="content" class="pane" id="">
<div class="page-wrap scroll" ng-controller="quizCtrl">
<div ng-repeat="question in questions | orderBy : 'question.number'" id="{{question.number}}">
<div>
<!--{{question.html}}<br /><br />-->
<p ng-bind-html="question.html"> </p><br /><br />
</div>
</div>
</div>
</div>




Error

Also, I tried with:

JSON.stringify
angular.fromJson(json);


When I use this lines
{{question.html}}<br /><br />
, I'm getting this:

With regular line

Thanks for your help guys!

Answer

I think you need the Strict Contextual Escaping Service ($sce). This is a service that enables you to specify the contexts in which it is O.K. to allow arbitrary HTML.

Docs: https://docs.angularjs.org/api/ng/service/$sce

Inject it in your controller:

app.controller('quizCtrl', function($rootScope, $scope, $http, $sce) 
...
$http.get(url5).then(function (response) {
    console.log(response.data);
    $sce.trustAsHtml = $sce.trustAsHtml; // <- needs to be exposed on $scope
    $scope.questions = $sce.trustAsHtml(response.data.questions);
})
...

And in your view:

{{questions}}
Comments