Convert JSON HTML string to HTML

Question

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:

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>

Also, I tried with:

JSON.stringify
angular.fromJson(json);

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

Thanks for your help guys!

If you use 'angular.js' instead of 'angular.min.js' you will see error texts, instead of links. :) — iuliu.net, Nov 28 '16 at 19:10

score 1 · Answer 1 · answered Nov 28 '16 at 18:50

1

You need to use $sce service

$sce.trustAsHtml(varWithHTML)

to make binding html work.

As the docs says https://docs.angularjs.org/api/ng/service/$sce

answered Nov 28 '16 at 18:50

Zdenek Hatak

1,135
14
23

I tried with an specific varaible like `$scope.questions2 = $sce.trustAsHtml(response.data.questions[0].html)` but if you tried with `, `$scope.questions = response.data.questions`, ng-repeat` doesn't work. – rfcabal Nov 28 '16 at 18:58

frishi · Accepted Answer · 2016-11-28T19:06:53.187

1

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}}

edited Nov 28 '16 at 19:06

answered Nov 28 '16 at 18:53

frishi

862
1
10
27

O.K. Referred to this answer http://stackoverflow.com/questions/24459194/angularjs-using-sce-trustashtml-with-ng-repeat, which explains how to solve that issue. Updated my answer as well. – frishi Nov 28 '16 at 19:07
I have to use this filter `.filter("sanitize", ['$sce', function($sce) { return function(htmlCode){ return $sce.trustAsHtml(htmlCode); } }])` Thanks for your help! – rfcabal Nov 28 '16 at 19:25
Sure, creating a filter is one way. Essentially, you can't use `$sce.trustAsHtml` inside an expression. – frishi Nov 28 '16 at 20:01

Convert JSON HTML string to HTML

2 Answers2