JSON Array that creates a form

by etiennenoel

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/kerning.js/0.2/kerning.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<div data-bind="foreach:data">
    <h1 data-bind="text: $data.groupName"></h1>
    <div data-bind="foreach: $data.content">
        <p data-bind="text: $data.title"></p>
        <!-- ko if: $data.formType == "select" -->
            <select data-bind="options: $data.value.title"></select>
        <!-- /ko -->
        
        <!-- ko if: $data.formType == "textBox" -->
            <div>
				<!-- ko if: $data.appendLabel == true  -->
					<div class="input-append" >	
				    <input type="text" data-bind="value: $data.value, attr : { disabled: $data.disabled }" />
				
					<span class="add-on" data-bind="text:$data.appendLabelText"></span>
					</div>
                <!-- /ko -->
                <!-- ko ifnot: $data.appendLabel -->
                    <input type="text" data-bind="value: $data.value, attr : { disabled: $data.disabled }" />
				<!-- /ko -->
            </div>        
        <!-- /ko -->
        <!-- ko if: $data.formType == "radio" -->
        <div data-bind="foreach:$data.value">
            <p>
            <input type="checkbox" data-bind="attr : { name: $data.title, checked: $data.checked }"/><span data-bind=" text:$data.title"></span>
            </p>
        </div>
        <!-- /ko -->
       
    </div>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

JavaScript

var formData = 
    {"data": 
		[
			{
			"groupName" : "Properties",
			"content" : 
			[
				{
					"title" : "Calculation Method",
					"formType" : "select",
					"value" : 
					[
						{
							"title" : "Voltage Drop - Unbalanced",
							"selected" : true
						},
						{
							"title" : "Voltage Drop - Balanced"
						}
					]
				},
				
				{
					"title" : "Tolerance (% V)",
					"formType" : "textBox",
					"value" : 0.01
				},
				
				{
					"title" : "Calculation Options",
					"formType" : "radio",
					"value" : 
					[ 
						{
							"title" : "Flat Start (at Nominal Conditions",
							"checked" : false
						} ,
						{
							"title" : "Assume Line Transposition",
							"checked" : true
						}
					]
				},
						
				{
					"title" : "Adjust Conductor Resistance at",
					"formType" : "textBox",
					"disabled" : true,
					"value" : 77,
					"appendLabel" : true,
					"appendLabelText" : "°F"    
				}
			]
			},
			{
			"groupName" : "Properties",
			"content" : 
			[
				{
					"title" : "Calculation Method",
					"formType" : "select",
					"value" : 
					[
						{
							"title" : "Voltage Drop - Unbalanced",
							"selected" : true
						},
						{
							"title" : "Voltage Drop - Balanced"
						}
					]
				},
				
				{
					"title" : "Tolerance (% V)",
					"formType" : "textBox",
					"value" : 0.01
				},
				
				{
					"title" : "Calculation Options",
					"formType" : "radio",
					"value" : 
					[ 
						{
							"title" : "Flat Start (at Nominal Conditions",
							"checked" : false
						} ,
						{
							"title" : "Assume Line Transposition",
							"checked" : true
						}
					]
				},
						
				{
					"title" : "Adjust Conductor Resistance at",
					"formType" : "textBox",
					"disabled" : true,
					"value" : 77,
					"appendLabel" : true,
					"appendLabelText" : "°F"    
				}
			]
			}
		]
	};  
ko.mapping.fromJS(formData);