Как создать HTML-форму из Json - PullRequest
Новая
       25

Как создать HTML-форму из Json

0 голосов
/ 09 апреля 2019


Я использую Activiti, и у меня есть такая форма:

enter image description here

Когда я использую 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 в HTML-форму с этими входными данными в результате Json.Я ищу много постов об использовании библиотеки, но я не могу сделать свой результат Json таким, как эта библиотека требуется.Так есть ли способ сделать это?
Большое спасибо!

Ответы [ 2 ]

1 голос
/ 10 апреля 2019 
    **Store your json response in a variable.eg:var json;**
As the json is getting from a Rest API,it can be stored in a variable.So that we can use that to proceed the form creation.We can iterate the formProperties to create the form inputs.
    <!DOCTYPE html>
    <html>
    <body>
    <form id="form">
      <input type="submit" name="mysubmit" value="Submit" />
    </form>


    <script>
    var formData = json.formProperties;
    var inputs = '';
     for (var i = 0; i < formData.length; i++) {
        if(formData[i].id == 'city'){
        inputs += '<label>'+formData[i].id+'</label></br><select><option>'+formData[i].enumValues[0].name+'</option><option>'+formData[i].enumValues[1].name+'</option> </select>'+'</br></br>';
        }else if(formData[i].id == 'dateTime'){
        inputs += '<label>'+formData[i].id+'</label></br><input type="date"/>'+'</br></br>';
        }else{
       inputs += '<label>'+formData[i].id+'</label></br><input  type="text" value="" id="' + formData[i].id + '">'+'</br></br>';
       }
     }
     document.getElementById('form').insertAdjacentHTML('afterbegin', inputs);
    </script>

    </body>
    </html>
0 голосов
/ 10 апреля 2019

Сначала комментарий, вы действительно должны показать в своем вопросе, что вы уже пробовали, и подробно рассказать о том, с чем конкретно у вас возникают проблемы.

Этот метод использует объекты 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>
...