AngularJS格式JSON字符串输出如何实现?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (34)

我有AngularJS应用程序,该应用程序从输入中收集数据,将模型转换为字符串使用,JSON.stringify()并让用户编辑此模型,以便在更新<textarea>元素时更新输入字段,反之亦然。某种双向绑定:)

问题是该字符串本身看起来很丑,我想格式化它看起来像这样:

现在看起来并不像它:

提问于
用户回答回答于

可以使用一个可选参数 JSON.stringify()

JSON.stringify(value[, replacer [, space]]) 参数

  • value要转换为JSON字符串的值。
  • replacer如果函数转换了字符串化时遇到的值和属性,如果是数组,则指定包含在最终字符串中的对象中的一组属性。javaScript指南文章使用本机JSON提供了替代函数的详细说明。
  • 空间 导致生成的字符串被打印出来。

例如:

JSON.stringify({a:1,b:2,c:{d:3, e:4}},null,"    ")

会给你以下结果:

"{
    "a": 1,
    "b": 2,
    "c": {
        "d": 3,
        "e": 4
    }
}"
用户回答回答于

Angular有一个内置的filter显示JSON

<pre>{{data | json}}</pre>

请注意使用pre-tag来节省空白和换行符

演示:

angular.module('app', [])
  .controller('Ctrl', ['$scope',
    function($scope) {

      $scope.data = {
        a: 1,
        b: 2,
        c: {
          d: "3"
        },
      };

    }
  ]);

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.2.15" data-semver="1.2.15" src="//code.angularjs.org/1.2.15/angular.js"></script>
  </head>

  <body ng-controller="Ctrl">
    <pre>{{data | json}}</pre>
  </body>

</html>

还有一种angular.toJson方法,但我没有玩过(文档

扫码关注云+社区