❤
npm
Sign UpSign In

json-ui

0.1.0 • Public • Published

json-ui

Json in editing in friendly UIs.

require

  • Install nodejs
  • Install npm

Usage

get js from ./dist/json_ui.js, css from ./app/css/json_ui.css and all views from app/views

Including files:

<link rel="stylesheet" href="./css/json_ui.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/json_ui.js"></script>

HTML structure

Set json-ui in page

<html ng-app="json.ui">
<body ng-controller="jsonUIController as jsonUI">
 
<div class="json-ui">
    <object class="root" id="json-ui" ng-init="jsonUI.config()">
    </object>
</div>

Set raw json editor in page

<div class="raw_json">
    <div id="editor"></div>
</div>

Set json-ui <-> raw-json buttons in page

<button class="to-json-raw" ng-click="jsonUI.toRawJson()">></button>
<button class="to-json-ui" ng-click="jsonUI.toJsonUI()"><</button>

Set export json link

 <a ng-href="{{jsonUI.jsonLink}}" download="jsonui.json" ng-click="jsonUI.getDownloadLink()">Export</a>

Initialization

Initialize Raw Json

var initJson =  {
                   "Name": "Robert",
                   "Family": ["Dad", "Mom", "Sister", "ME"],
                   "Home": {"Country": "Taiwan", "City": "Tainan"}
                };
 
editor.init(initJson);

Initialize json-ui

Default Initialization

angular.module('json.ui')
  .config(function (AppConfigProvider) {
    AppConfigProvider.set({
        id: '#json-ui'
    });
});

Alter options

angular.module('json.ui')
  .config(function (AppConfigProvider) {
    AppConfigProvider.set({
      initialSync : true
    });
});

Options

Options value default explain example
id element id (string) '#json-ui' 'json-ui': set root object id
initialSync true / false false true: Json-ui and Raw json synchronization when page load

Develop

First run the following command (installing bower npm install -g bower)

$ bower install

start server (you should install npm install http-server -g first)

$ npm start

open the browser and type this http://localhost:8000/app/

compile scss file & js file

We are using browserify so you should install browserify in global first ( npm install -g browserify ).

$ npm install
$ gulp

deploy

$ ./deploy

/json-ui/

    Package Sidebar

    Install

    npm i json-ui

    Repository

    github.com/Canner/json-ui

    Homepage

    github.com/Canner/json-ui

    Weekly Downloads

    6

    Version

    0.1.0

    License

    none

    Last publish

    Collaborators

    • chihsuan
    Try on RunKit
    Report malware