odra/ng-json-explorer

json explorer angular directive

ng-json-explorer

I AM NO LONGER MAINTAINING THIS PROJECT - please let me know if you would like to adopt it.

Simple json explorer angular directive that uses raw json data as source.

This module is based in the firefox jsonview extenrsion made by Ben Hollis: https://github.com/bhollis/jsonview/

Properties

The directive has the following properties:

• data: json content to be displayed (needs to be and object or array);
• json-data: alias for data
• url: An string url to be fetched (HTTP GET) or an object to be used by $http service;
• collapsed: a boolean value to collapse (or not) objects/arrays content when the data is loaded/parsed;
• sort-by: a field to used as reference to order the json data (should be an array): sort-by="counter:asc" or sort-by="name:desc".

Styling

Check src/angular-json-explorer.css

Usage

Check the demo folder (demo/index.html) for examples.

Installation

bower install ng-json-explorer

Module dependency

angular
.module('app', ['ngJsonExplorer'])

Files to be used in production are located in the folder "ng-json-explorer/dist"

Including the required files (js and css)

<script src="angular-json-explorer.min.js"></script> 
<link rel="stylesheet" type="text/css" media="screen" href="angular-json-explorer.css" />

Sending the json data to your template

$scope.data = {
	"name": "Json Explorer",
	"qty": 10,
	"has_data": true,
	"arr": [
		10,
		"str",
		{
			"nested": "object"
		}
	],
	"obj": {
		"hello": "world"
	}
}

Usage

Check the demo folder (demo/index.html) for a simple example.

Using the directive to display the data (you can use either "json-data" or "data")

<json-explorer json-data="data"></json-explorer>
<json-explorer data="data"></json-explorer>

Using the directive to display the data from a URL

<json-explorer url="http://myurl.com"></json-explorer>

Using the collapsed attribute

<json-explorer json-data="data" collapsed="true"></json-explorer>
<json-explorer data="data" collapsed="true"></json-explorer>

Using the directive to display the data

<json-explorer json-data="data"></json-explorer>
<json-explorer data="data"></json-explorer>

Using the directive to display the data from a URL

<json-explorer url="http://myurl.com"></json-explorer>

Using the collapsed attribute

<json-explorer json-data="data" collapsed="true"></json-explorer>
<json-explorer data="data" collapsed="true"></json-explorer>