Question

我的Web应用程序中需要一个JSON格式化程序，它是使用Angular JS和Java开发的。

我基本上想要这样的JSON格式化程序在其格式化视图中显示JSON。我想格式化，因为通常当我在html中渲染我的JSON文本时，它就像一堆文本一样显示。

这就是为什么我想让JSON格式化程序在格式化视图中显示这些JSON文本。它将帮助用户轻松理解JSON。

在我的应用程序用户输入JSON用于不同目的。例如，管理员输入/修改JSON以生成动态字段。 JSON文本将存储在DB中。我想为所有目的制作一个通用的JSON格式化程序。如果不可能不同的JSON格式化程序用于不同的操作。

有些人建议我使用JSON.stringify（）。但是我如何才能将此用于我的目的呢？或任何其他想法？

Answer 1

JSON.stringify正是您要找的

JSON.stringify(jsonObject, null, 4); // stringify with spaces (recommended)
JSON.stringify(jsonObject, null, '\t'); // stringify with tabs

真实世界的例子：

<html>
    <body>
        <pre>
            <div id="stringifiedCode">

            </div>
        </pre>
    </body>
</html>

<script type="text/javascript">
var obj = { "hello" : "world", "Test" : [ "hello" ] };
document.getElementById('stringifiedCode').innerHTML =JSON.stringify(obj, null, 4);
</script>

Answer 2

HTML：

<div ng-app="myapp" ng-controller="myctrl">
    <pre>{{ str|json }}</pre>
</div>

脚本：

angular.module('myapp',[])
 .controller('myctrl',function($scope){
     $scope.str = {name:'Joe',address:'xyz',mobile:['154552','45698']};
  });

Plunker

如何使用JS和HTML制作JSON格式化程序？

2 个答案: