Show HTML from JSON with Angular

Question

I'm new with Angular, and i am making an application with ionic. I can't show HTML from JSON in my view. I searched previous questions but still doesn't work. The html code is written as text..

My code

HTML

<div ng-bind-html="bindHTML"></div>

Json

"usuarios": [
    {
      "nombre": "Name 1",
      "description":"<p>Some HTML</p><p>More HTML</p>",
      "id": 0
    },
    {
      "nombre": "Name 2",
      "description":"<p>Some HTML</p><p>More HTML</p>",
      "id": 1
    }
]

Controller

.controller('UserCtrl', ['$scope', '$http', '$state', function($scope, $http, $state) {
    $http.get('js/data.json')
        .success(function(data){
            $scope.data = data.usuarios[$state.params.id];
            $scope.bindHTML = $sce.trustAsHtml(data.description);
        });
}])

Thanks.

As I say in my question, I tried this code and it doesn'work =( — wanheda
– wanheda, Commented May 12, 2016 at 1:25
I don't know, I'm trying for the last 3 hours with different codes and nothing — wanheda
– wanheda, Commented May 12, 2016 at 1:28
implement the preprocessor in your code and show your work and I'll tell you what you're doing wrong. — Christian Hill
– Christian Hill, Commented May 12, 2016 at 1:30

sourdoughdetzel · Accepted Answer · 2016-05-12 01:40:20Z

3

I implemented a plunker to illustrate how this works. The only thing I didn't include is the ui.router $state stuff you are doing.

Controller

app.controller('MainCtrl', function($scope, $http, $sce) {
    $http.get('data.json').success(function(data){
        $scope.data = $sce.trustAsHtml(data.usuarios[0].descripcion);
    });
});

View

 <body ng-app="plunker" ng-controller="MainCtrl">
    <p ng-bind-html="data"></p>
  </body>

I'm not sure why yours wouldn't be working if you tried what was suggested in the thread that was marked as duplicate. That would leave me to believe it has something to do with the $state dependency, but hard to tell with out seeing your full app.

answered May 12, 2016 at 1:40

sourdoughdetzel

6643 silver badges6 bronze badges

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

6 Comments

wanheda Over a year ago

Thanks for your answer. I tried that but it didn't work. I put in this plunker plunker.co/edit/Hd2laRauUq all my code. I have a list in comunidad.html, when i click in a row i go to user.html where i show the data.description (json from each user)

sourdoughdetzel Over a year ago

Your <script> tags weren't pointing to the right stuff in the plunker... I changed them and stuff showed up in the preview...

<!-- ionic/angularjs js -->     <script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.0/js/ionic.bundle.js"></script>     <!-- your app's js -->     <script src="lib/script.js"></script>

wanheda Over a year ago

Oh Sorry, i fix the url. Please, click in "Comunidad" tab. And then click in an item list. There in user.html You can see the name, but the description is not seen.

sourdoughdetzel Over a year ago

your user controller was missing the "$sce" dependency being passed in, and it was referencing "data" not "$scope.data"...

.controller('UserCtrl', ['$scope', '$http', '$state', '$sce', function($scope, $http, $state, $sce) {   $http.get('js/data.json').success(function(data){     $scope.data = data.usuarios[$state.params.id];     $scope.bindHTML = $sce.trustAsHtml($scope.data.description);   }); }])

wanheda Over a year ago

Now it works!!! Thank you very much!! I'm new and I still don't understand much. Thanks for your time!. If I can do something for you just write me.

|

Collectives™ on Stack Overflow

Show HTML from JSON with Angular

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related