CODEWITHSUNDEEP
angularjsjsonmodal-dialog
tom33pr
tom33pr

Reputation: 1023

mdDialog display pretty json in modal

Trying to display prettified json in Angular mdModal... Here's my code:

 testVm.showPopup = function(id, data, ev) {
            var jsonPrettified = JSON.stringify(JSON.parse(data), null, 2);
            $mdDialog.show({
                parent: angular.element(document.body),
                clickOutsideToClose: true,
                template: jsonPrettified
            });
        };

The jsonPrettified holds the exact json structure I want to see on my pop up...

Now... I've figured I can't use the modal alert + .text becasue it will always render it as a text and flatten my json structure... I need to add this as a div to the template instead, right?

Any help appreciated. Thank you.

Upvotes: 0

Views: 1032

Answers (2)

Daniel Delgado
Daniel Delgado

Reputation: 5353

Try to use angular 'json' filter, it's easier. You don't need to transform your json object to an string by yourselft, angular does it for you.

var myobject = { "name": "Daniel", "lastname": "Delgado", "age": 23 };

$mdDialog.show({
    parent: angular.element(document.body),
    clickOutsideToClose: true,                
    locals:{
      _json: myobject // a variable that is going to catched in the controller
    },
    controller: function($scope, _json){
      $scope.myjson = _json;                  
    },
    template: `<pre>
                {{ myjson | json:2 }}
              </pre>`
});

Upvotes: 0

voskhod
voskhod

Reputation: 194

You should put your jsonPrettified into <pre> tag. It will save all indents in the string.

Upvotes: 2

Related Questions