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
– iuliu.net, Commented Nov 28, 2016 at 19:10

frishi · Accepted Answer · 2016-11-28 19:06:53Z

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, 2016 at 19:06

answered Nov 28, 2016 at 18:53

frishi

8821 gold badge11 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

frishi Over a year ago

O.K. Referred to this answer stackoverflow.com/questions/24459194/…, which explains how to solve that issue. Updated my answer as well.

rfcabal Over a year ago

I have to use this filter

.filter("sanitize", ['$sce', function($sce) {         return function(htmlCode){             return $sce.trustAsHtml(htmlCode);         } }])

Thanks for your help!

frishi Over a year ago

Sure, creating a filter is one way. Essentially, you can't use $sce.trustAsHtml inside an expression.

Zdenek Hatak · Accepted Answer · 2016-11-28 18:50:35Z

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, 2016 at 18:50

Zdenek Hatak

1,14514 silver badges23 bronze badges

1 Comment

rfcabal Over a year ago

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.

Collectives™ on Stack Overflow

Convert JSON HTML string to HTML

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related