CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsjson
rfcabal
rfcabal

Reputation: 119

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!

Upvotes: 2

Views: 1225

Answers (2)

frishi
frishi

Reputation: 882

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

Upvotes: 1

Zdenek Hatak
Zdenek Hatak

Reputation: 1145

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

Upvotes: 1

Related Questions