Wie erstelle ich ein Formular mit einem json über Javascript?

Question

Ich habe eine JSON-Datei. und ich möchte ein Formular mit ihnen über Javascript produzieren. Ich möchte ein Eingabefeld erzeugen, wenn der Typ 128 ist und ich möchte es dynamisch generieren. die Form, die ich zu generieren erwarten ist ungefähr wie folgt aus:

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

Hier ist mein Javascript-Code:

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; 

    } 

und hier ist meine Json-Datei:

{ 
    "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 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++) { 
 
\t var type=schema[i].type; 
 
\t if(type==128){ 
 
\t \t var titleinput=schema[i].queestion; 
 
\t \t var divtitle=document.getElementById('input'); 
 
\t divtitle.innerHTML=titleinput + " : "; 
 
\t var string = "<input "; 
 
\t for (var y=0;y<schema[i].attrs.length;y++){ 
 
\t \t string += schema[i].attrs[y].attr.name+'="'+schema[i].attrs[y].attr.value+'" ' 
 
\t } 
 
\t string+=">"; 
 
\t console.log(string) 
 
\t var y=document.getElementById('addinput'); 
 
\t y.innerHTML=string; 
 
} 
 
if(type==137){ 
 
var titleinput=schema[i].queestion; 
 
\t \t var divtitle=document.getElementById('select'); 
 
\t divtitle.innerHTML=titleinput + " : "; 
 
\t var str = "<select><option>gender</option>"; 
 
\t for (var j = 0; j < schema[i].values.length; j++) { 
 
\t \t str +="<option value='"+schema[i].values[j].value.value+"'>"+schema[i].values[j].value.title+"</option>" 
 
\t } 
 
\t str +='</select>' 
 
\t 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>

I suppose this should help you @Hadis,https://jsfiddle.net/vikramgopali/wr7b6uzx/

Answer 3

Verwenden für (.. in ..) Schleife Ihre JSON-Daten zu analysieren und die Form dynamisch machen.

wenn die Daten in json_data Variable. Dann

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

Auf diese Weise können Sie dynamische Formulare mit JSON-Daten in Javascript erstellen. Ich denke, das würde dir helfen.