如何从Json创建HTML表单

Question

我正在使用Activiti，并且具有这样的形式：

当我使用Rest API时，该表格将与Json一起返回，如下所示：

{
    "formKey": null,
    "deploymentId": "21151",
    "processDefinitionId": null,
    "processDefinitionUrl": null,
    "taskId": "21159",
    "taskUrl": "http://localhost:8080/activiti-rest/service/runtime/tasks/21159",
    "formProperties": [
        {
            "id": "firstName",
            "name": "First Name",
            "type": "string",
            "value": null,
            "readable": true,
            "writable": true,
            "required": true,
            "datePattern": null,
            "enumValues": []
        },
        {
            "id": "lastName",
            "name": "Last Name",
            "type": "string",
            "value": null,
            "readable": true,
            "writable": true,
            "required": false,
            "datePattern": null,
            "enumValues": []
        },
        {
            "id": "phoneNumber",
            "name": "Phone Number",
            "type": "string",
            "value": null,
            "readable": true,
            "writable": true,
            "required": false,
            "datePattern": null,
            "enumValues": []
        },
        {
            "id": "dateTime",
            "name": "Date Time",
            "type": "date",
            "value": null,
            "readable": true,
            "writable": true,
            "required": false,
            "datePattern": "dd/MM/yyyy",
            "enumValues": []
        },
        {
            "id": "city",
            "name": "City",
            "type": "enum",
            "value": null,
            "readable": true,
            "writable": true,
            "required": false,
            "datePattern": null,
            "enumValues": [
                {
                    "id": "0",
                    "name": "TPHCM"
                },
                {
                    "id": "1",
                    "name": "HN"
                }
            ]
        }
    ]
}

我想将此Json转换为带有Json结果输入的HTML表单。我搜索了许多有关使用库的帖子，但无法使我的Json结果像所需的库那样。那么有什么办法吗？
非常感谢你！

Answer 1

Update

Answer 2

首先发表评论，您确实应该在问题中显示您到目前为止所做的尝试，并详细说明您遇到的困难。

此技术使用DOM对象创建表单。它使用文档片段来限制对DOM的实际更新次数。希望代码中的注释可以自我解释。

//Just for demo purposes - this would be your API Call
var data = getData();

//Get the bit we need
var formData = data.formProperties;

//Call our function to carete the form
createForm(formData);

//The magic
function createForm(data){
  //Create a fragment so we aren't constantly updating the DOM
  var container = document.createDocumentFragment();
  
  data.forEach(function(formProp){
  //Create a row div with a class
  var rowDiv = document.createElement("div");
  rowDiv.classList.add("rowDiv");
  
  //Create a label
  var label = document.createElement("label");
  label.setAttribute("for", formProp.id);
  label.innerHTML = formProp.name;
  
  //Create a form element
  var formElement = document.createElement(formProp.type == "enum" ? "select" : "input");
  //Set it's properties
  formElement.id = formProp.id;
  formElement.name = formProp.id;
  formElement.required = formProp.required;
  formElement.readOnly = !formProp.writable;
  
  
  //Do some stuff if the form element is required
  if(formProp.required){
    rowDiv.classList.add("required");    
  }
  
  //Do stuf for not select 
  if(formProp.type != "enum"){
    formElement.value = formProp.value;
    
    if(formProp.type == "date") {
      formElement.type = "date";
    }
    //Add any other types here
    else {
      //falback to text
      formElement.type = "text";
    }
  }
  //Add the enum values
  else {
    formProp.enumValues.forEach(function(formEnum){
      var opt = document.createElement("option");
      opt.value = formEnum.id;
      opt.text = formEnum.name;   
      opt.selected = formEnum.id == formProp.value;
      formElement.appendChild(opt);
    });    
  }
  
  //Add label and element to div
  rowDiv.append(label);
  rowDiv.append(formElement);  
  
  //Apend div to fragment
  container.appendChild(rowDiv);
  });
  //Add fragment to form
  document.getElementById("mainForm").appendChild(container);
}



function getData(){
var data = {
    "formKey": null,
    "deploymentId": "21151",
    "processDefinitionId": null,
    "processDefinitionUrl": null,
    "taskId": "21159",
    "taskUrl": "http://localhost:8080/activiti-rest/service/runtime/tasks/21159",
    "formProperties": [
        {
            "id": "firstName",
            "name": "First Name",
            "type": "string",
            "value": null,
            "readable": true,
            "writable": true,
            "required": true,
            "datePattern": null,
            "enumValues": []
        },
        {
            "id": "lastName",
            "name": "Last Name",
            "type": "string",
            "value": null,
            "readable": true,
            "writable": true,
            "required": false,
            "datePattern": null,
            "enumValues": []
        },
        {
            "id": "phoneNumber",
            "name": "Phone Number",
            "type": "string",
            "value": null,
            "readable": true,
            "writable": true,
            "required": false,
            "datePattern": null,
            "enumValues": []
        },
        {
            "id": "dateTime",
            "name": "Date Time",
            "type": "date",
            "value": null,
            "readable": true,
            "writable": true,
            "required": false,
            "datePattern": "dd/MM/yyyy",
            "enumValues": []
        },
        {
            "id": "city",
            "name": "City",
            "type": "enum",
            "value": null,
            "readable": true,
            "writable": true,
            "required": false,
            "datePattern": null,
            "enumValues": [
                {
                    "id": "0",
                    "name": "TPHCM"
                },
                {
                    "id": "1",
                    "name": "HN"
                }
            ]
        }
    ]
}
return data;
};

/*Add some styling for required*/
.required::after {
  content: " *";
  color:#F00;
}

.rowDiv {
  padding:2px;
}

.rowDiv label {
  display:inline-block;
  width: 20%;
}

<form id="form">
  <fieldset id="mainForm">
  </fieldset>
  <fieldset id="buttons">
  <input type="submit" value="Complete Task">
  <input type="reset" value="Reset From">
  </fieldset>
</form>