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.

Duplicate of http://stackoverflow.com/questions/31333151/how-to-render-a-html-tag-from-json-value-using-angularjs — Christian Hill, May 12 '16 at 01:23
As I say in my question, I tried this code and it doesn'work =( — wanheda, May 12 '16 at 01:25
I don't know, I'm trying for the last 3 hours with different codes and nothing — wanheda, May 12 '16 at 01:28
implement the preprocessor in your code and show your work and I'll tell you what you're doing wrong. — Christian Hill, May 12 '16 at 01:30
Please look now. I don't understand how works bindHTML. I think my problem is there. — wanheda, May 12 '16 at 01:40
No, still not working. With this code doesn't show anything. — wanheda, May 12 '16 at 01:44
what does the entire html file look like? Is the html you have up there contained within the scope of the controller? — sourdoughdetzel, May 12 '16 at 01:48
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) — wanheda, May 12 '16 at 02:12

score 3 · Accepted Answer · answered May 12 '16 at 01:40

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 '16 at 01:40

sourdoughdetzel

664
3
6

Thanks for your answer. I tried that but it didn't work. I put in this plunker https://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) – wanheda May 12 '16 at 02:10
Your ` – sourdoughdetzel May 12 '16 at 02:15
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. – wanheda May 12 '16 at 02:26
1

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); }); }])` – sourdoughdetzel May 12 '16 at 02:35
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. – wanheda May 12 '16 at 02:43
awesome, glad to help! – sourdoughdetzel May 12 '16 at 02:47

Show HTML from JSON with Angular

1 Answers1