Need to create interactive preview of JSON with AngularJS

Question

I have JSON that looks like this:

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"
    }
  }]

I need to create an interactive and expandable preview for this JSON in HTML. Can anyone suggest how to do this?

That's not [JSON](https://json.org). _"JSON is a textual, language-indepedent data-exchange format, much like XML, CSV or YAML."_ - [What is the difference between JSON and Object Literal Notation?](https://stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation) — Andreas, Jan 22 '18 at 10:24
You mean this `$scope.your_json = ....;` -> `
{{your_json | json}}
`? — Aleksey Solovey, Jan 22 '18 at 10:25
i will get like this data from response, now i need to show using html ( how we see preview in chrome ) — mammam, Jan 22 '18 at 10:26
ok, I ll try to creating boxes, preview means i want to say, if we expend we can check inside the test object, like that, how in google chrome (developer mode) network have preview box, like that — mammam, Jan 22 '18 at 10:46
@mammam then forget about my suggestion it's not what you want. You should consider [angular-json-tree](https://github.com/awendland/angular-json-tree) look at [this example](https://codepen.io/timbrown81/pen/QEyZrL) — Aleksey Solovey, Jan 22 '18 at 14:00

score 0 · Answer 1 · answered Jan 22 '18 at 10:24

0

You can use the filter "json" provided by angular to do this;

{{data | json}}

answered Jan 22 '18 at 10:24

Tom Johnson

679
5
15

thanks for help @Tom. but its not working, its as same like JSON.stringify. – mammam Jan 22 '18 at 10:31

score 0 · Accepted Answer · answered Jan 22 '18 at 10:54

0

You can use the filer "json" in HTML file as :

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

answered Jan 22 '18 at 10:54

Chiru Adi

647
4
21

Thanks @chiru, this

 tag looks ok,, but i need to expend  if i have object, have any idea,  how i ll do?

– mammam Jan 22 '18 at 11:00

1

If you want to expand then i think you may need to go with ng js tree plugin. – Chiru Adi Jan 22 '18 at 11:06

pgrodrigues · Answer 3 · 2018-01-22T11:20:06.033

0

I'm not sure if you're using AngularJS or other version, but I think you're looking for something like json-formatter, if it's AngularJS you're using.

Just add it to your app module has you would do with any other module and use the directive:

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

If you're using Angular2 instead of AngularJS, maybe you can try angular2-prettyjson.

edited Jan 22 '18 at 11:20

answered Jan 22 '18 at 11:07

pgrodrigues

2,083
1
24
28

Need to create interactive preview of JSON with AngularJS

3 Answers3