AngularJS格式的JSON字符串输出

92

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

问题是字符串本身看起来很丑，我想对其进行格式化，因此它看起来像这样：

在此处输入图片说明

而且看起来不像现在这样：

在此处输入图片说明

有什么想法可以做到吗？如果您需要其他信息-请不要犹豫。每个答案都受到高度赞赏，并立即得到答复。

谢谢。

PS我猜这应该是某种指令或自定义过滤器。数据本身不应更改，只能更改输出。

— 紫水晶
source

1

您可以尝试吗？-在文本区域中，按Enter键并根据需要设置结果字符串的格式。然后，在您$watch的textarea模型（基于上一个问题的答案）中，您可以执行a console.log()并查看在回车键的字符串中得到的值-我认为它是“ / n”

— callmekatootie 2014年

1

基于此，我可以建议您如何设置文本格式

— callmekatootie 2014年

{“ anchorPosition”：“ 1”，“ difficulty”：“ 1”，“ includeInSequence”：“ 1”，“ questionCount”：“ 1”}

— amenoire 2014年

字符串格式化后，基本上没有任何改变。

— amenoire'4

请参阅下面的答案-他们有帮助吗？

— callmekatootie 2014年

65

您可以使用以下可选参数 JSON.stringify()

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

参量

value要转换为JSON字符串的值。

replacer如果是函数，则对字符串化时遇到的值和属性进行转换；如果是数组，则指定最终字符串中对象所包含的属性集。javaScript指南文章“使用本机JSON”中提供了replacer函数的详细说明。

space 使结果字符串漂亮打印。

例如：

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

将给您以下结果：

"{
    "a": 1,
    "b": 2,
    "c": {
        "d": 3,
        "e": 4
    }
}"

— 卢卡斯·维克多（Lukasz Wiktor）
source

5

请注意，这保留了$$hashKey用于内部模型跟踪的角度使用属性

— PixnBits 2014年

1

您也可以在JSON.stringify(object, null, 2)其中2是空格字符数的情况下进行操作。

— MrE

@ Lukasz，我可以避免使用$$ Hashkey吗？

— 阿德兰医师

433

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方法，但是我还没有解决这个问题（文档）

— 伊瓦尼
source

1

是的，我已经知道了。但是我不能做这个过滤器，因为文本区域本身就是一个模型。

— amenoire'4

这是如此简单，却非常有用：D

— Jamie Street

2

@ ra170请善于仔细阅读整个问题，而不仅仅是标题。我要求的东西与简单的json过滤器略有不同。

— amenoire

请注意，您的<pre>标记不应将white-space属性设置为normal或no-wrap。否则，您的JSON将不会缩进。

— falconepl

3

我遇到了问题，但是我没有<pre>。...。

— 卢卡斯

23

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

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

在此处输入图片说明

— 莫森
source

11

除了已经提到的角度json滤波器之外，还有角度toJson()函数。

angular.toJson(obj, pretty);

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

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

（默认值：2）

— 丹尼尔·海利
source

当我给他一个1000个对象的数组时，我的页面被阻止了

— Asqan 2015年

Youvariable = angular.toJson ....，因为你写的，它看起来像的结果相当

— 马尔西奥Rossato

6

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

{{数据| json}}

并添加一个adition属性

 可编辑的


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

希望这可以帮到你。

— 葛
source

2

如果要格式化JSON并进行一些语法突出显示，则可以使用ng-prettyjson指令。请参阅npm软件包。

使用方法如下： <pre pretty-json="jsonObject"></pre>

— 纳扬
source