Usage Guide

Directive

To use JSON-Schema-Builder in your application inject json-schema into your module.

angular.module('myapp', ['json-schema'])

Next use json-schema directive in you html.

<div json-schema data="data" definitions="definitions"></div>

This module supports $ref and to specify the $ref models you can use the definitions attribute in the directive as shown above. Define an aboject that contains the list of models that you want to display as option for $ref as

$scope.definitions = {
    address:{
        "type": "object",
        "properties": {
            "addressLine1": {
                "type": "string"
            },
            "addressLine2": {
                "type": "string"
            },
            "postCode": {
                "type": "string"
            },
            "country": {
                "type": "string"
            }
        },
        "required": [
            "addressLine1",
            "addressLine2",
            "postCode",
            "country"
        ]
    }
};
                

Now when you select $ref as the type you will get a dropdown with #/definitions/address

Service

This library also exposes a service JsonSchema which you can inject into your controller and use.

angular.module('app', ['json-schema'])
    .controller('MyController', MyController);

MyController.$inject = ['$scope', 'JsonSchema'];
function schemaCtrler($scope, JsonSchema) {
    ......
}
            

Some of the functions available in the service are

• obj2schema: Converts the object/model referred by data attribute in the directive to Json Schema

>>> html
<div json-schema data="xyz" models="refModels"></div>

>>> js
//to get the actual schema schema from xyz use 
var schema = JsonSchema.obj2schema($scope.xyz);
                

• schema2obj: Converts any Json Schema to an object so that it can be passed to the data attribute in the directive. Can be used to initilize the editor to some default schema.

>>> js
var schema = {
    "type": "object",
    "properties": {
        "name": {
            "type": "string",
            "minLength": 3,
            "maxLength": 255
        },
        "age": {
            "type": "integer",
            "minimum": 18
        }
    },
    "required": [
        "name",
        "age"
    ]
}

$scope.schemaData = JsonSchema.schema2obj(schema)

>>> html
<div json-schema data="schemaData" models="refModels"></div>
                

This module was initially developed to be used with APIC and has been extensively used in the Chrome app for APIC