Question

我的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创建交互式和可扩展预览。谁能建议怎么做？

Answer 1

您可以使用angular提供的过滤器“json”来执行此操作;

{{data | json}}

Answer 2

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

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

Answer 3

我不确定你是使用AngularJS还是其他版本，但我认为你正在寻找像json-formatter这样的东西，如果它是你正在使用的AngularJS。

只需将其添加到您的app模块，您可以使用任何其他模块并使用该指令：

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

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

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

3 个答案: