Question

我知道如何使用javascript以编程方式美化JSON。这样我们就可以实现：

var obj = {"hello":"world", "Test":["hello"]}
document.body.innerHTML = "";
document.body.appendChild(document.createTextNode(JSON.stringify(obj, null, 4)));

但我试图在角度js中做到这一点。但我无法做到这一点。这是我的步骤：

<div class="btn btn-primary" ng-click="test()">Press</div>
<textarea  json-formatter rows="20" cols="140" ng-model="json">
</textarea>

$scope.test=function(){
        var json=JSON.stringify($scope.json, null, "\t");
        /*here if $scope.json is {"hello":"world", "Test":["hello"]}
        then json return "{\"hello\":\"world\", \"Test\":[\"hello\"]}" */
}

此处$scope.json为{"hello":"world", "Test":["hello"]} 然后json返回"{\"hello\":\"world\", \"Test\":[\"hello\"]}"。之后，我现在不知道如何将美化json显示到同一文本区域。如何解决这个问题。有没有其他方法，请建议我？

Answer 1

有一个内置功能可以过滤json {{Object | json}}

您可以为代码使用内置过滤器

{{dataObject | json}}

美化你的json，试一试。

这是一个有效的例子：

http://plnkr.co/edit/DM1TbN3eXGngJaFgi6n6?p=preview

Answer 2

您可以使用Angular's built in json filter来打印对象。

在您的视图中，您可以按如下方式使用过滤器：

{{yourData | json}}

可以通过将第二个数值传递到过滤器来自定义缩进：

{{yourData | json:4}}

此代码的工作示例可在此处找到：http://jsbin.com/nakazuhaqa/1/edit?html,js,output

Answer 3

Angular为此提供了一个帮助：

angular.toJson(json, true);

https://docs.angularjs.org/api/ng/function/angular.toJson

如何在角度js中以编程方式美化JSON？

3 个答案:

有一个内置功能可以过滤json {{Object | json}}