jquery - JQueryを使用してJSONまたはXMLフィードからHTMLフォームを生成する

Question

Jqueryを使用してXMLまたはJSONデータに基づいてHTMLフォームを作成したいと思います。また、空または正しくない可能性のあるフォームフィールドを検証する予定です。

そのようなフォームをその場で動的に生成する他のプログラム/関数があるかどうか、そしてこれを実装するための最良の方法を知りたいです。動作例で最適に動作するjqueryウィジェットまたはライブラリをいただければ幸いです。

また、このシナリオのXMLまたはJSONで最適に使用するフィードとその理由を説明してください。

ありがとう

Answer 1

私はあなたを助けるかもしれないこれらのいくつかを見つけました：

JSONスキーマからのフォームの生成：

• JSON定義を使用してhtmlフォームを作成する方法は？
• http://neyric.github.com/inputex/examples/json-schema.html
• JSONまたは同様のデータから動的HTMLフォームを生成/レンダリングするJavaScript？
• htmlフォームを生成するための任意のツール

XMLスキーマからのフォームの生成：

• http://www.totallysmartit.com/examples/xml/questionnaire/
• XMLからHTMLフォームを作成する
• http://www.datamech.com/XMLForm/

フォームを生成するためのさまざまなライブラリからのサンプル：

• http://www.alpacajs.org/examples.html
• http://jsonforms.io/#/examples
• http://schemaform.io/examples/bootstrap-example.html

Answer 2

別の選択肢を提供するために、私が作成したライブラリ：

https://github.com/brutusin/json-forms

JSONスキーマからHTMLフォームジェネレーター、動的サブスキーマをサポート（オンザフライ解像度）。依存関係がゼロの拡張可能でカスタマイズ可能なライブラリ。提供されるブートストラップアドオン

 var bf = brutusin["json-forms"].create({
  "$schema": "http://json-schema.org/draft-03/schema#",
  "type": "object",
  "properties": {
    "s1": {
      "type": "string",
      "title": "A string",
      "description": "A string input"
    },
    "num1": {
      "type": "integer",
      "title": "A number",
      "minimum": 1,
      "maximum": 10,
      "multipleOf": 3,
      "description": "An integer multiple of `3`, between `1` and `10` (inclusive)"
    },
    "array1": {
      "type": "array",
      "title": "An array values",
      "items": {
        "type": "object",
        "properties": {
          "value": {
            "type": "string",
            "title": "Value"
          }
        }
      }
    }
  }
});
var container = document.getElementById('container');
bf.render(container);

<link rel="stylesheet" href='https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/css/brutusin-json-forms.min.css'/>
<link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'/>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/js/brutusin-json-forms.min.js"></script>
<script src="https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/js/brutusin-json-forms-bootstrap.min.js"></script>
<div id="container"></div>
<hr>
<button class="btn btn-primary" onclick="alert(JSON.stringify(bf.getData(), null, 4))">getData()</button>&nbsp;<button class="btn btn-primary" onclick="if (bf.validate()) {alert('Validation succeeded')}">validate()</button>

http://brutusin.org/json-formsでのその他のライブ例