需要使用 AngularJS 创建 JSON 的交互式预览答案

【问题标题】：Need to create interactive preview of JSON with AngularJS需要使用 AngularJS 创建 JSON 的交互式预览
【发布时间】：2018-06-30 22:49:25
【问题描述】：

我的 JSON 看起来像这样：

data: [{
  test: {
    innertest: "2345",
    outertest: "abcd"
  },
  trans: {
    sig: "sou",
    trip: [{
      one: "2"
    }, {
      two: "3"
    }],
    otherac: "iii"
  },{
    test: {
      innertest: "uuu",
      outertest: "rrr"
    },
    trans: {
      sig: "e",
      trip: [{
        one: "9"
      },{
        two: "8"
      }],
      otherac: "eee"
    }
  }]

我需要在 HTML 中为这个 JSON 创建一个交互式和可扩展预览。谁能建议如何做到这一点？

【问题讨论】：

在 angularjs 或纯 javascript 中
那不是JSON。 “JSON 是一种文本、语言无关的数据交换格式，很像 XML、CSV 或 YAML。” - What is the difference between JSON and Object Literal Notation?
我正在使用 Angular 2。任何事情对我来说都很好，
你的意思是$scope.your_json = ....; -> <div>{{your_json | json}}</div>?
@mammam 然后忘记我的建议，这不是你想要的。你应该考虑angular-json-tree看看this example

标签： javascript jquery angularjs json

【解决方案1】：

您可以将 HTML 文件中的文件管理器“json”用作：

<pre ng-bind="data|json"></pre>

【讨论】：

谢谢@chiru，这个

 标签看起来不错，但是如果我有对象，我需要花费，有什么想法，我该怎么做？

如果你想扩展，那么我认为你可能需要使用 ng js 树插件。

【解决方案2】：

您可以使用angular提供的过滤器“json”来做到这一点；

{{data | json}}

【讨论】：

感谢@Tom 的帮助。但它不起作用，它和 JSON.stringify 一样。

【解决方案3】：

我不确定您使用的是 AngularJS 还是其他版本，但我认为您正在寻找类似 @987654321@ 的东西，如果您使用的是 AngularJS。

只需将它添加到您的应用程序模块中，您就可以使用任何其他模块并使用指令：

<json-formatter json="{my: 'json'}" open="1"></json-formatter>

如果你使用 Angular2 而不是 AngularJS，也许你可以试试angular2-prettyjson。

【讨论】：