My json values are getting out of box.How to pretty print those values?

Question

Hi i am new to Angular JS, want to print my JSON data in proper pretty print format, when i print my hardcoded data my output will display in pretty print format. But with actual code my data is coming from ccloud which i am not getting in proper petty print format.

<script type="text/javascript">
    $(document).ready(
            function() {
                alert("entered");
                var json = document.getElementById("jsonStr").value;
                alert(json);
                alert(document.getElementById("jsonStr1").value);
                var jsonParse = JSON.parse(json);
                var jsonFormatted = JSON.stringify(jsonParse, null, ' ');
                document.getElementById("jsonDiv").innerHTML = '<pre>'
                        + jsonFormatted + '</pre>';
            });
</script>



<tab> 
        <tab-heading> Image Ancestry </tab-heading>
            <div class="list-group">
                <a ng-repeat="img in imageAncestry" class="list-group-item"
                ng-class="{active: imageDetails.id==img}"> <span class="glyphicon"
                ng-class="{'glyphicon-arrow-down': ($first&&!$last)||$middle}"></span>
                <!--  {{img | limitTo:12}} --> <input id="jsonstr" type="text"
                value={img} />
        <div id="jsonDiv"></div>
        </div>
    </tab>

With {{img|limitTo:12}} json is getting out of box.

Would be helpful if you could create a demo on [jsfiddle](http://jsfiddle.net/) — iJade, Jul 28 '15 at 06:33
http://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript — Kalhan.Toress, Jul 28 '15 at 06:34

score 1 · Answer 1 · answered Jul 28 '15 at 06:58

1

You can use AngularJS toJson method:

JS:

$scope.json = angular.toJson(<YOUR-JSON>, true);

HTML:

<!-- this is going to be indent and pretty print -->
{{json}}

answered Jul 28 '15 at 06:58

michelem

14,430
5
50
66

My json values are getting out of box.How to pretty print those values?

1 Answers1