AngularJS 格式 JSON 字符串输出答案

【问题标题】：AngularJS format JSON string outputAngularJS 格式 JSON 字符串输出
【发布时间】：2014-05-12 04:58:43
【问题描述】：

我有一个 AngularJS 应用程序，它从输入中收集数据，使用 JSON.stringify() 将模型转换为字符串，并允许用户以这样的方式编辑此模型，即如果更新了 <textarea> 元素，则输入字段也会更新，并且反之亦然。某种双向绑定:)

问题是字符串本身看起来很丑，我想把它格式化成这样：

现在看起来不像：

任何想法如何实现？如果您需要一些额外的信息 - 不要犹豫询问。每个答案都受到高度赞赏并立即得到答复。

谢谢。

附：我想这应该是某种指令或自定义过滤器。数据本身不应该改变，只有输出。

【问题讨论】：

你可以试试这个 - 在文本区域中，按 Enter 并根据需要格式化结果字符串。然后在你的 $watch （基于对上一个问题的答案）在 textarea 模型上，你能做一个 console.log() 并查看你在输入键的字符串中得到什么值 - 我认为它是“/n”跨度>
基于此，我可以建议您如何格式化文本
{"anchorPosition":"1", "difficulty":"1", "includeInSequence":"1", "questionCount":"1"}
String 格式化后基本上没有任何变化。
查看下面的答案 - 它们有帮助吗？

标签： javascript json string angularjs formatting

【解决方案1】：

Angular 有一个内置的filter 用于显示JSON

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

注意使用pre-标签来节省空格和换行符

演示：

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 方法，但我没玩过（Docs）

【讨论】：

是的，我已经知道了。但我不能制作这个过滤器，因为 textarea 本身就是一个模型。
这很简单，但很有用：D
@ra170 请仔细阅读整个问题，而不仅仅是标题。我要求的东西与简单的 json 过滤器略有不同。
请注意，您的<pre> 标签不应将white-space 属性设置为normal 或no-wrap。否则，您的 JSON 将不会按照您的意愿缩进。

我遇到了问题，但没有

....我看到了这个答案，我修复了....谢谢！！

【解决方案2】：

您可以使用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
    }
}"

【讨论】：

请注意，这会保留 $$hashKey 属性 angular 用于内部模型跟踪
您也可以使用JSON.stringify(object, null, 2)，其中 2 是空白字符的数量。
@Lukasz，我可以避免 $$Hashkey 吗？

【解决方案3】：

如果您希望将 JSON 呈现为 HTML 并且可以折叠/打开，您可以使用我刚刚制作的这个指令来很好地呈现它：

https://github.com/mohsen1/json-formatter/

【讨论】：

【解决方案4】：

除了已经提到的angular json filter，还有angular toJson() function。

angular.toJson(obj, pretty);

此函数的第二个参数可让您打开漂亮的打印并设置要使用的空格数。

如果设置为 true，则 JSON 输出将包含换行符和空格。如果设置为整数，则 JSON 输出将包含每个缩进的那么多空格。

（默认：2）

【讨论】：

当我给他一个包含 1000 个对象的数组时，我的页面被阻止了
Youvariable = angular.toJson ....，正如你所写，结果看起来很漂亮

【解决方案5】：

我猜你想用它来编辑 json 文本。然后你可以使用 ivarni 的方式：

{{数据 | json}}

并添加一个附加属性以使

 可编辑

<pre contenteditable="true">{{data | json}}</pre>

希望对你有帮助。

【讨论】：

【解决方案6】：

如果你想格式化 JSON 并做一些语法高亮，你可以使用ng-prettyjson 指令。 See the npm package.

这里是如何使用它：<pre pretty-json="jsonObject"></pre>

【讨论】：