[ACCEPTED]-how to create a html form using a JSON definition?-dynamic

In shameless self promotion I would also 4 like to mention my jQuery.dForm plugin. It's been around for 3 a while now and support the jQuery validation 2 plugin, jQuery UI and is easily extensible. This 1 is how it looks:

var formdata =
{
    "action" : "index.html",
    "method" : "get",
    "elements" : 
    [
        {
            "name" : "textfield",
            "caption" : "Label for textfield",
            "type" : "text",
            "value" : "Hello world"
        },
        {
            "type" : "submit",
            "value" : "Submit"
        }
    ]           
};
$("#myform").buildForm(formdata);

// Or to load the form definition via AJAX
$("#myform").buildForm("http://example.com/myform.json");

I would suggest using JSON Form.

It takes a JSON Schema and can 7 instantly make a form for it, and additionally 6 give you options to customize the form further. E.g.:

$('#myform').jsonForm({
  schema: {
    name: {
      type: 'string',
      title: 'Name',
      required: true
    },
    age: {
      type: 'number',
      title: 'Age'
    }
  }
});

…would 5 generate a form with two inputs in #myform 4 element. (jQuery is optional.)

Using the 3 standardized format JSON Schema gives other 2 great advantages and more tools to work 1 with the data definition.

I would agree with Jeremy S Angular Schema Form is outstanding. It 21 follows the same pattern as JSON Form and I have 20 started using it in production and it is 19 working very well.

It is also extensible 18 and I quite quickly wrote a tool to read 17 hyper-schema definition and pull in select 16 field options from an external source and 15 watch other related fields for their data 14 before doing so. It took only a day to build 13 that, suffice to say it is really easy to 12 extend and as it also takes advantage of 11 Angular I would class it as the best choice.

If 10 you are not using Angular then JSON Form 9 would be my preferred option since I see 8 its schema and form pattern emerging as 7 a bit of a standard with these two projects 6 using it. Also given my experience working 5 in enterprise service management it makes 4 sense as nearly all tools for service management 3 have a data model and then a form design 2 administration component for extending the 1 model.

Disclaimer: I was not maintaining Angular Schema Form when I wrote this.

I only became the maintainer on the project a year later because I already loved it.

Definitely check out Alpaca: http://www.alpacajs.org

It renders 9 HTML forms from JSON Schema using Bootstrap, jQueryUI, jQuery 8 Mobile or straight web controls. It has 7 a large library of controls and all sorts 6 of nifty features.

We use it at Cloud CMS 5 (http://www.cloudcms.com) to render some really intuitive UIs.

Alpaca 4 itself is Apache 2.0 licensed and on GitHub 3 (https://github.com/gitana/alpaca).

The coming 1.5.0 release introduces pure 2 Handlebars support and custom gulp builds. Pretty 1 cool stuff.

Angular doesn't solve your problem out of 22 the box because it asumes that you have 21 static html which you want to bind some 20 data to.

Having said that you can use angular 19 to fulfill your objectives. You can create 18 a new tag (angular widget) which will take 17 a js object and dynamically creates the 16 form DOM along with all the angular validation 15 attributes. You then compile the form with 14 angular's compiler and attach it to your 13 page. This will result in dynamically created 12 form with all the existing angular's validation 11 and databinding features working just like 10 with a static html.

There is nothing I can 9 think of that would prevent you from doing 8 this via angular.widget api, but it's not 7 a trivial task.

Can you tell me more about 6 your data structures? I wonder if having 5 just a set of forms and using the right 4 one at the right time wouldn't be sufficient. Why 3 do you need the form creation to by completely 2 dynamic and data-driven?

UPDATE: The angular 1 solution can be found at https://groups.google.com/forum/#!topic/angular/f8KbLtT_Mqs

May I humbly suggest Metawidget?

It generates HTML 2 forms from arbitrary complex JSON objects. Simple 1 JavaScript example:

<!DOCTYPE HTML>
<html>
   <head>
      <script src="http://metawidget.org/js/4.0/metawidget-core.min.js"></script>
      <style>
         #metawidget {
            border: 1px solid #cccccc;
            width: 250px;
            border-radius: 10px;
            padding: 10px;
            margin: 50px auto;
         }
      </style>
   </head>
   <body>
      <div id="metawidget"></div>
      <script type="text/javascript">
         var mw = new metawidget.Metawidget( document.getElementById( 'metawidget' ));
         mw.toInspect = {
            firstname: 'Homer',
            surname: 'Simpson',
            age: 36
         };
         mw.buildWidgets();
      </script>
   </body>
</html>

It also supports:

• augmenting the JSON object with additional sources of metadata, such as JSON Schema or metadata from REST services
• frameworks such as JQuery UI, JQuery Mobile, AngularJS
• third-party component libraries and validators
• pluggable layouts

Check out jQuery Templates plugin.
A little while back I wrote 3 up a little blog post on Client-side Data Binding with jQuery Templates. It seems to 2 me that this is exactly what you're looking 1 for.

I've used Jeremy Dorn's JSON Editor for 5 various applications and have always been 4 satisfied with it! It uses JSON Schema, and 3 adds some options for the form generation 2 (as you could conceivably have a variety 1 of inputs for a given type of data structure)

https://github.com/jdorn/json-editor

Check out InputEx, it seems exactly what you want.

It 1 uses JSON to define the entire form:

// Create a schemaIdentifierMap 
var schemaIdentifierMap = {
 // Person definition
 "Person": {
    "id": "Person",
    "description":"A person",
    "type":"object",
    "properties": {
        "name": { "type":"string"},
        "born" : { "type":"string", "format":"date", "optional":true},
        "gender" : { "type":"string", "choices": [ {"value":"male","label":"Guy"}, {"value":"female","label":"Girl"} ]},
        "grownup": { "type": "boolean" },
        "favoritecolors": { "type": "array" },
        "address": { 
            "type":"object",
            "properties":{
                "street":{"type":"string"},
                "city":{"type":"string"},
                "state":{"type":"string"}
            }
        }
    }
 }
};

(from http://neyric.github.com/inputex/examples/json-schema.html)

Take a look at brutusin:json-forms.

It accepts a JSON-Schema 2 and the initial JSON data to populate the 1 form.