ng-json-viewer

Changes history you can find here

Main features

• Code folding
• Array index
• Syntax highlighting
• Display value type

Demo

You can see demo on this page

Installation

• Via bower (preferred way)

bower install --save jv.json-viewer

• Download zip package

Usage

Add module as dependency to your app:

angular.module('your-app', ['jv.json-viewer']);

Add json viewer directive to template:

<jv-json-viewer></jv-json-viewer>

Default JSON Viewer code colors you can find in demo/jsonViewer.less (at the top of file).

Module's components

• jsonViewer directive - directive for adding progress bar to the page.
• jsonViewer service - all directive parsing is done in this service.

jsonViewer directive

Directive will be replaced by its template. For customization different JSON Viewer styles, you can add classes to it or modify the less variables in jsonViewer.less.

Usage

<ng-json-viewer editor="true || false" data="json || string"></ng-json-viewer>