I'm trying to make a system that generates a file based on the selection in a form. Currently I use FormIO to generate the forms from a json structure. FormIO form builder
So when I press submit it would download a file with my selected values. I know it already generates the object. But I don't know how to filter it with this.
Right now it generates the file with this in it. But I would like to only have the radio button value and the name.
{"data":{"radio2":1,"howLongShouldItWait":12,"submit":true},"metadata":{"timezone":"Europe/Brussels","offset":60,"referrer":"","browserName":"Netscape","userAgent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0","pathName":"/C:/Users/Jan/Desktop/IPP_conf/index.html","onLine":true},"state":"submitted","saved":false}
So what I eventually want is something like this
#define WAIT_TIME 3
#define OVERRIDE_BUTN
The js function to download the file and the JSON part.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Configuration form</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css">
<script src="https://unpkg.com/formiojs@latest/dist/formio.full.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="resources/logo64x64.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1 class="mt-5">Settings</h1>
<div id="formio"></formio>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
Formio.icons = 'fontawesome';
Formio.createForm(document.getElementById('formio'), {
"display": "form",
"components": [
{
"label": "Test",
"optionsLabelPosition": "right",
"values": [
{
"label": "Yes",
"value": "1",
"shortcut": ""
},
{
"label": "No",
"value": "0",
"shortcut": ""
}
],
"inline": true,
"mask": false,
"tableView": true,
"alwaysEnabled": false,
"type": "radio",
"input": true,
"key": "radio2",
"defaultValue": 1,
"validate": {
"customMessage": "",
"json": ""
},
"conditional": {
"show": "",
"when": "",
"json": ""
},
"encrypted": false,
"properties": {},
"customConditional": "",
"logic": [],
"reorder": false
},
{
"label": "How long should it wait?",
"optionsLabelPosition": "right",
"values": [
{
"label": "1 Hour",
"value": "1",
"shortcut": ""
},
{
"label": "12 Hours",
"value": "12",
"shortcut": ""
}
],
"inline": true,
"mask": false,
"tableView": true,
"alwaysEnabled": false,
"type": "radio",
"input": true,
"key": "howLongShouldItWait",
"defaultValue": 12,
"validate": {
"customMessage": "",
"json": ""
},
"conditional": {
"show": "",
"when": "",
"json": ""
},
"encrypted": false,
"reorder": false,
"properties": {},
"customConditional": "",
"logic": []
},
{
"label": "Generate",
"state": "",
"theme": "primary",
"shortcut": "",
"disableOnInvalid": true,
"mask": false,
"tableView": true,
"alwaysEnabled": false,
"type": "button",
"key": "submit",
"input": true,
"defaultValue": false,
"validate": {
"customMessage": "",
"json": ""
},
"conditional": {
"show": "",
"when": "",
"json": ""
},
"encrypted": false,
"properties": {
"test": "5"
},
"tags": [],
"showValidations": false,
"event": "",
"url": "",
"custom": "",
"reorder": false,
"customConditional": "",
"logic": []
}
],
}).then(function (form) {
var filename = "settings.h";
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
form.on('submit', function (submission) {
console.log(submission);
download(filename, JSON.stringify(submission));
});
});</script>
</body>
</html>I tried a for loop on the submission variable. But I don't know how to select the exact data.
Kind regards and thanks in advance
答案 0 :(得分：0)
我仍然必须正确过滤它，但是我得到了我需要的数据，我看起来有点过头了。除了使用自定义提交端点link，还有另一种更简单的方法。
for(key in submission.data){
//Do stuff where key would be 0 and value would be the object
console.log(key + ' ' + submission.data[key] );
}
现在，我可以根据需要进行过滤。我尝试直接从“提交”中获取数据，所以我走了正确的路。