Question

我有一个Json文件。我想通过javascript生成一个表单。如果type为128并且想要动态生成它，我想生成inputbox。我希望生成的形式是这样的：

<form action="">
  name:<br>
  <input type="text" class="input1" id="input1" data-value="0">
 <br>
  <input type="submit" value="Submit">
</form>

这是我的Javascript代码：

for (var i = 0; i < schema.length; i++) {
    var type=schema[i].type;
    if(type==128){ 

        var titleinput=schema[i].queestion
        var divtitle=document.getElementById('input');
        divtitle.innerHTML=titleinput;


        var string = "<input ";
        for (var y=0;y<schema[i].attrs.length;y++){
            string += schema[i].attrs[y].attr.name+'="'+schema[i].attrs[y].attr.value+'" '
        }
    }
        string+=">";
        var y=document.getElementById('addinput'); 
        y.innerHTML=string;

    }

这是我的Json文件：

{
    "queestion":"نام" ,
    "type":"128",
    "attrs":[
        {"attr":{
            "name":"class",
            "value":"input1"
        }},
        {"attr":{
            "name":"id",
            "value":"input1"
        }},
        {"attr":{
            "name":"data-value",
            "value":"0"
        }}
    ]

}

Answer 1

JSON data:

{
    "employees": [
        {
            "firstName": "John",
            "lastName": "Doe"
        },
        {
            "firstName": "Anna",
            "lastName": "Smith"
        },
        {
            "firstName": "Peter",
            "lastName": "Jones"
        }
    ]
}

need to push each column (firstName, lastName) to the '{}' brackets
var viewData = { 
    employees : [] 
};

var rowNum = -1; 
function onGeneratedRow(columnsResult)
{
    var jsonData = {};
    columnsResult.forEach(function(column) 
    {
        var columnName = column.metadata.colName;
        jsonData[columnName] = column.value;
    });
    viewData.employees.push(jsonData);
 }

Answer 2

var b = {
  a: 1,
  b: 2
};
Object.defineProperty(b, "c", {
  enumerable: true,
  configurable: false,
  writable: true,
  value: 3
});
delete b.c;
console.log(b); //all properties intact

var schema = [{
    "queestion":"name" ,
    "type":"128",
    "attrs":[
        {"attr":{
            "name":"class",
            "value":"input1"
        }},
        {"attr":{
            "name":"id",
            "value":"input1"
        }},
        {"attr":{
            "name":"data-value",
            "value":"0"
        }}
    ]

},{
    "queestion":"gender" ,

    "type":"137",
    "attrs":[
        {"attr":{
            "name":"class",
            "value":"input1"
        }},
        {"attr":{
            "name":"id",
            "value":"input1"
        }},
        {"attr":{
            "name":"data-value",
            "value":"0"
        }}
    ],
    "values":[
        {"value":{
            "title":"famale",
            "value":"0"
        }},
        {"value":{
            "title":"male",
            "value":"1"
        }}
    ]
}]

for (var i = 0; i < schema.length; i++) {
	var type=schema[i].type;
	if(type==128){ 
		var titleinput=schema[i].queestion; 
		var divtitle=document.getElementById('input'); 
	divtitle.innerHTML=titleinput + " : "; 
	var string = "<input "; 
	for (var y=0;y<schema[i].attrs.length;y++){ 
		string += schema[i].attrs[y].attr.name+'="'+schema[i].attrs[y].attr.value+'" ' 
	} 
	string+=">"; 
	console.log(string) 
	var y=document.getElementById('addinput'); 
	y.innerHTML=string; 
}
if(type==137){
var titleinput=schema[i].queestion; 
		var divtitle=document.getElementById('select'); 
	divtitle.innerHTML=titleinput + " : "; 
	var str = "<select><option>gender</option>";
	for (var j = 0; j < schema[i].values.length; j++) {
		str +="<option value='"+schema[i].values[j].value.value+"'>"+schema[i].values[j].value.title+"</option>"
	}
	str +='</select>'
	var x=document.getElementById('option'); x.innerHTML=str;
}
}

.container{
  display : flex;
  flex-direction: row;
}

<div class="container"> <div id="input"></div><div id="addinput"></div> </div> <div class="container"> <div id="select"></div><div id="option"></div> </div> https://jsfiddle.net/vikramgopali/wr7b6uzx/

Answer 3

使用 for（.. in ..）循环来解析您的JSON数据并动态制作表单。

如果 json_data 变量中的数据。然后，

for (x in json_data){
console.log(x) //this will print the key 
console.log(json_data[x]) //this will print the corresponding value
}

通过这种方式，您可以使用javascript中的任何json数据创建动态表单。我认为这会对你有所帮助。

如何通过javascript创建带有json的表单？

3 个答案: